/* file: giveonline.css */

/* =========================================================
   01) DESIGN TOKENS
   ---------------------------------------------------------
   Centralized variables for color, type, radius, effects.
   Change values here to theme the entire page.
   ======================================================= */
:root {
  --brand: #2c4f9e;
  /* LightSys blue */
  --brand-600: #274688;
  --brand-300: #7fa0e6;
  --ink: #1a1b1f;
  /* body text */
  --muted: #5b5e68;
  /* secondary text */
  --bg: #f6f7fb;
  /* page background */
  --card: #ffffff;
  /* card background */
  --border: #d9deea;
  --focus: #0a7cff;
  --radius: 14px;
  --shadow: 0 8px 28px rgba(27, 51, 117, .12);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* =========================================================
   02) PAGE SHELL
   ---------------------------------------------------------
   Establish base typography and the radial-accented bg.
   Background is fixed, non-repeating, and covers viewport.
   ======================================================= */
body.give {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(44, 79, 158, .08), transparent 50%),
    radial-gradient(1000px 700px at 110% 10%, rgba(44, 79, 158, .06), transparent 60%),
    var(--bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}

/* Kill legacy <center> markup and provide a sane layout flow */
.give main {
  display: grid;
  place-items: start center;
  padding: clamp(20px, 4vw, 48px);
}

/* =========================================================
   03) BRAND HEADER
   ---------------------------------------------------------
   Centers the brand mark above the card. Image is unscaled.
   ======================================================= */
.brand {
  display: grid;
  place-items: center;
  margin-top: 16px;
}

.brand img {
  display: block;
  height: auto;
}

/* =========================================================
   04) CARD CONTAINER
   ---------------------------------------------------------
   The main card that wraps the page content. We use
   !important to override inline styles emitted by PHP.
   A custom --card-pad var lets us create edge-to-edge
   child banners without fighting rounding issues.
   ======================================================= */
.give .card {
  --card-pad: 20px;
  width: min(600px, 90vw) !important;
  /* was min(800px, 90vw) */
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: var(--card-pad) !important;
  margin-top: 18px !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
  position: relative;
}

.card p {
  margin: .25rem 0 .9rem;
}

/* Ensure notice inside the card doesn’t reintroduce borders or fixed widths */
.give .card .notice {
  border: 0 !important;
  width: auto;
  max-width: 100%;
}

/* Info block inside the card should stretch naturally */
.give .card .info {
  width: 100% !important;
  /* overrides inline 500/700px widths */
  max-width: none !important;
}

/* Redirect panel should also follow the card’s content width */
.redirect {
  width: 100% !important;
  /* span the card’s content width */
  max-width: none !important;
}

/* =========================================================
   05) ALERT BANNERS
   ---------------------------------------------------------
   .notice is a generic yellow banner.
   .notice--in-card becomes an edge-to-edge footer banner
   inside the card using a ::before “bleed” background so
   the banner appears seamless under rounded corners.
   ======================================================= */
.notice {
  width: 100%;
  background: #fff8c8;
  font-size: clamp(14px, 2.2vw, 16px);
  padding: 10px 14px;
  line-height: 1.4;
}

.notice a {
  text-decoration: underline;
}

.notice b {
  margin-right: .35em;
}

.notice--in-card {
  /* neutralize any sticky/fixed positioning used elsewhere */
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  text-align: center;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff8c8 !important;

  /* place after content and tuck into the card’s rounded edge */
  margin-top: var(--card-pad);
  margin-bottom: calc(-1 * var(--card-pad));
  width: calc(100% + (2 * var(--card-pad)));
  transform: translateX(calc(-1 * var(--card-pad)));
  padding: 12px 18px;
}

/* Create a wide “bleed” behind the notice so the card’s radius clips it */
.notice--in-card::before {
  content: "";
  position: absolute;
  left: -1000px;
  right: -1000px;
  top: 0;
  bottom: -1000px;
  /* slides neatly under the curved bottom */
  background: #fff8c8;
  z-index: -1;
  /* behind banner text */
}

/* =========================================================
   06) TYPOGRAPHY
   ---------------------------------------------------------
   Headings scale modestly; h2 adopts brand color.
   Small print styles for disclaimers and footnotes.
   ======================================================= */
h1,
h2,
h3 {
  margin: .2rem 0 .6rem;
  line-height: 1.2;
}

h2 {
  font-size: clamp(18px, 2.6vw, 22px);
  color: var(--brand);
}

p.small,
.disclaimer {
  color: var(--muted);
  font-size: 13px;
}

/* Footnote block for end-of-card disclaimers */
.footnote {
  font-size: 0.85em;
  font-style: italic;
  color: var(--muted, #555);
  margin-top: 1.2em;
  line-height: 1.45;
}

/* =========================================================
   07) LINKS & BUTTONS
   ---------------------------------------------------------
   Brand-colored links; buttons are subtle, bordered chips
   with a very light gradient and hover state.
   ======================================================= */
a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--brand) 30%, #fff);
  background: linear-gradient(#ffffff, #f6f9ff);
  color: var(--brand);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
  cursor: pointer;
}

.btn:hover {
  background: #f3f7ff;
}

/* =========================================================
   08) SEARCH
   ---------------------------------------------------------
   Two-column search layout (input + submit). We override
   any inline sizes from PHP to keep things consistent.
   Focus ring uses --focus color with soft halo.
   ======================================================= */
.search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: .3rem 0 1.1rem;
}

.search input[type="text"],
.search input[name="search"] {
  width: 100% !important;
  height: auto !important;
  font-size: 16px !important;
  line-height: 1.2;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
}

.search input[name="search"]:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 30%, transparent);
}

.search input[type="submit"],
.search button[type="submit"] {
  padding: .65rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--brand-300);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.search input[type="submit"]:hover {
  background: var(--brand-600);
}

/* =========================================================
   09) RESULTS LIST
   ---------------------------------------------------------
   Simple list as cards with hover color + border accent.
   ======================================================= */
.results {
  display: grid;
  gap: 8px;
  margin: .4rem 0 1rem;
  list-style: none;
  padding: 0;
}

.results a {
  display: block;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.results a:hover {
  background: #f7f9ff;
  border-color: var(--brand-300);
}

/* =========================================================
   10) REDIRECT PANEL
   ---------------------------------------------------------
   A subtle bordered panel with a dashed column divider.
   ======================================================= */
.redirect {
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .03);
}

.redirect table {
  width: 100%;
  border-collapse: collapse;
}

.redirect td {
  padding: 8px 10px;
  vertical-align: middle;
}

.redirect td+td {
  border-left: 1px dashed #c8ccd8;
}

.dest-url a {
  display: inline-block;
  /* or block if needed */
  max-width: 100%;
  /* ensures it stays within the parent */
  white-space: nowrap;
  /* keeps it on one line */
  overflow: hidden;
  /* hides the overflowed text */
  text-overflow: ellipsis;
  /* shows … at the cutoff point */
  vertical-align: middle;
  /* optional, aligns nicely with label */
}

/* =========================================================
   11) FOOTER INFO BLOCK
   ---------------------------------------------------------
   Ancillary info below the card; keeps text quiet and
   respects small widths from mobile up to wide screens.
   ======================================================= */
.info {
  width: min(680px, 90vw) !important;
  /* override any inline width */
  margin-top: 20px !important;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.info a {
  color: var(--brand);
}

/* =========================================================
   12) MOBILE OVERRIDES
   ---------------------------------------------------------
   PHP injects very large default sizes on mobile; normalize
   to 16px and allow intrinsic sizing for form/table pieces.
   ======================================================= */
@media (max-width: 632px) {
  .give main {
    padding-inline: 16px;
    /* 16px margins on both sides */
    padding-block: clamp(16px, 4vw, 24px);
  }

  .give .card {
    width: 100% !important;
    /* fill the padded area */
    --card-pad: 16px;
    /* optional: slightly tighter inner pad */
  }
}


/* === MOBILE FIXES: exact 16px gutters & no overflow (≤632px) === */
@media (max-width: 632px) {

  /* 16px gutters come from main’s padding */
  .give main {
    padding-inline: 16px;
    padding-block: 16px;
  }

  /* Card fills the padded area; keep your new cap on larger screens */
  .give .card {
    width: 100% !important;
    --card-pad: 16px;
    /* optional: a touch tighter inside */
  }

  /* Brand area aligns with the card and scales the logo */
  .brand {
    width: 100%;
    margin-inline: auto;
  }

  .brand img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* --- The important part: keep search row from forcing overflow --- */
  .search {
    width: 100%;
    /* First column may shrink; second is only as wide as its content */
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 10px;
  }

  /* Allow grid children to actually shrink inside the grid */
  .search>* {
    min-width: 0;
  }

  /* Input stays flexible */
  .search input[type="text"],
  .search input[name="search"] {
    width: 100% !important;
  }

  /* Button sizes to its label, never stretches the row */
  .search input[type="submit"],
  .search button[type="submit"] {
    width: auto;
    /* fit-content behavior */
    white-space: nowrap;
    /* keep “Search” on one line */
    padding: .6rem 1rem;
    /* reasonable pill size on phones */
  }

  /* Safety: prevent any stray horizontal scroll from other elements */
  html,
  body {
    overflow-x: hidden;
  }
}

/* Keep the new desktop/tablet cap (was 800px, now 600px) */
.give .card {
  width: min(600px, 90vw) !important;
}

/* ===== FIX 1: Make widths include padding/borders so 100% never overflows ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* safe, global */
.give .card {
  box-sizing: border-box;
}

/* belt-and-suspenders */

/* Keep your 600px default cap */
.give .card {
  width: min(600px, 90vw) !important;
}

/* Phone layout with 16px gutters */
@media (max-width: 632px) {
  .give main {
    padding-inline: 16px;
    padding-block: 16px;
  }

  .give .card {
    width: 100% !important;
    /* now truly fits (border-box) */
    --card-pad: 16px;
    /* optional: compact interior */
    margin-inline: auto !important;
  }

  /* Brand image must respect the card width */
  .brand {
    width: 100%;
    margin-inline: auto;
  }

  .brand img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}

/* ===== FIX 2: Vertically center the Search button label ===== */
.search input[type="submit"],
.search button[type="submit"] {
  display: inline-flex;
  /* makes centering reliable */
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* remove extra inline height */
  padding: .6rem 1rem;
  /* keep the pill look */
  white-space: nowrap;
  /* avoid wrapping */
}

/* Prevent the grid row from pushing the card wider */
@media (max-width: 632px) {
  .search {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 10px;
    width: 100%;
  }

  .search>* {
    min-width: 0;
  }
}

/* Optional safety: no stray horizontal scrollbars */
html,
body {
  overflow-x: hidden;
}

/* =========================================================
   13) Countdown Handoff
   ---------------------------------------------------------

   ======================================================= */

.redirect {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #d0d6e5;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(96, 128, 192, .08);
}

.countdown {
  display: inline-flex;
  align-items: center;
  gap: 0;
  /* no global gap */
  margin: .5rem 0 .75rem;
  font-weight: 600;
}

/* precise spacing */
#cdPrefix {
  margin-right: 0;
}

#count {
  margin: 0 0;
}

/* space on both sides of the number */
#cdSuffix {
  margin-left: .25rem;
}

#pauseAuto {
  margin-left: .5rem;
}

/* breathing room before the button */

.countdown #count {
  display: inline-block;
  min-width: 1.6ch;
  text-align: right;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .7rem;
  border-radius: .6rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.1;
  font-weight: 600;
}

.btn-ghost {
  background: transparent;
  color: #2c4f9e;
  border-color: #b8c3dd;
  border-width: 1px;
}

.btn-ghost:hover {
  filter: brightness(1.05);
}

.btn-ghost:active {
  transform: translateY(1px);
}

.processor {
  text-align: right;
}

.processor-old {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  /* border-top: 1px dashed #c9d3ea; */

  display: flex;
  justify-content: flex-end;
  /* push the entire line to the right edge */
  align-items: center;
  /* vertical center of text + logo */
  gap: 0.5rem;
  /* little space between text and logo */
}

.processor-old .via {
  color: #556;
  opacity: 0.8;
  font-size: 0.95em;
  line-height: 1;
  /* keeps text centered visually with logo */
}

.processor-old img {
  display: block;
  /* removes extra baseline gap */
  height: 40px;
  /* ensures consistent alignment */
  width: auto;
  /* let width scale naturally */
}

.no-results {
  color: #b00000;
  /* dark red */
  font-style: italic;
  font-size: 0.85rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 1.1rem;
}

.search:has(+ .no-results) {
  margin: .3rem 0 .3rem;
}