/* =============================================================
   THE GIVING WATER — Advertising slots + Forms
   ============================================================= */

/* ---------------- Ad system ---------------- */
.ad{
  position:relative; display:block; border-radius:var(--radius);
  background:var(--mist); border:1px solid var(--border); overflow:hidden;
  box-shadow:var(--shadow-xs);
}
.ad__tag{ position:absolute; top:6px; left:6px; z-index:3; font-size:.58rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--stone-500);
  background:rgba(255,255,255,.82); padding:.15rem .45rem; border-radius:5px; }
.ad img{ width:100%; height:100%; object-fit:cover; display:block; }
.ad a{ display:block; height:100%; }

/* Sizes (min-heights keep layout stable before load) */
.ad--leaderboard{ width:100%; max-width:970px; margin-inline:auto; aspect-ratio:970/250; }
.ad--billboard{ width:100%; max-width:970px; aspect-ratio:970/250; }
.ad--rect{ width:300px; max-width:100%; aspect-ratio:300/250; }
.ad--half{ width:300px; max-width:100%; aspect-ratio:300/600; }
.ad--sky{ width:160px; aspect-ratio:160/600; }
.ad--mobile{ width:320px; max-width:100%; aspect-ratio:320/100; }

/* House ad (promotes advertising when a slot is unsold) */
.ad--house{ background:linear-gradient(150deg,#0d4671,#0a2c48); color:#dff1fb; border-color:rgba(255,255,255,.1);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:1rem; gap:.5rem; }
.ad--house .h{ font-family:var(--font-head); font-weight:600; font-size:1.05rem; color:#fff; line-height:1.15; }
.ad--house .s{ font-size:.78rem; color:#b9d9ea; max-width:22ch; }
.ad--house .btn{ padding:.5rem 1rem; font-size:.82rem; }
.ad--house::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:26px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='26'><path d='M0 14 q30 -12 60 0 t60 0 v26 H0 Z' fill='%2337b6e9' opacity='.25'/></svg>") repeat-x;
  background-size:120px 26px; animation:waveScroll 8s linear infinite; }

/* Top leaderboard band */
.ad-band{ background:var(--paper); padding:.9rem var(--gutter); display:flex; justify-content:center;
  border-bottom:1px solid var(--border); }

/* Fixed vertical rail (wide desktops only) */
.ad-rail{ position:fixed; top:calc(var(--header-h) + 60px); z-index:var(--z-rail); display:none; }
.ad-rail--right{ right:16px; }
.ad-rail--left{ left:16px; }
@media (min-width:1560px){ .ad-rail{ display:block; } }

/* Floating dismissible corner unit (always in view) */
.ad-float{ position:fixed; right:14px; bottom:74px; z-index:var(--z-float); width:300px; max-width:calc(100vw - 28px);
  box-shadow:var(--shadow-lg); border-radius:var(--radius); transform:translateY(12px); opacity:0;
  transition:opacity var(--t),transform var(--t); }
.ad-float.show{ opacity:1; transform:none; }
.ad-float.hidden{ display:none; }
.ad-float__close{ position:absolute; top:-10px; right:-10px; z-index:5; width:26px; height:26px; border-radius:50%;
  background:var(--river-900); color:#fff; border:2px solid #fff; display:grid; place-items:center; font-size:.8rem;
  box-shadow:var(--shadow); }
@media (max-width:560px){ .ad-float{ width:min(340px,calc(100vw - 20px)); right:10px; bottom:70px; } }

/* In-content rectangle wrapper */
.ad-inline{ display:flex; justify-content:center; margin-block:var(--sp-6); }

/* Footer sponsor strip */
.ad-footer-strip{ background:#08283f; padding:1.1rem var(--gutter); display:flex; justify-content:center; }

/* Placement showcase (advertise page) */
.placement{ position:relative; border:1px dashed var(--border-strong); border-radius:var(--radius);
  background:repeating-linear-gradient(45deg,#f2f8fc,#f2f8fc 12px,#eaf3f8 12px,#eaf3f8 24px);
  display:grid; place-items:center; color:var(--stone-500); font-weight:700; text-align:center; padding:1rem; }
.placement .dim{ font-size:.8rem; color:var(--stone-400); font-weight:600; }

/* =============================================================
   FORMS
   ============================================================= */
.form{ display:grid; gap:1.2rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:680px){ .form-grid,.form-grid--3{ grid-template-columns:1fr; } }
.col-span-2{ grid-column:1/-1; }

.field{ display:flex; flex-direction:column; gap:.4rem; }
.field > label{ font-weight:700; font-size:.9rem; color:var(--river-900); letter-spacing:.01em; }
.field .req{ color:var(--red-500); }
.field .hint{ font-size:.78rem; color:var(--text-muted); }

.input, .select, .textarea{
  width:100%; padding:.85rem 1rem; font-size:1rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--border-strong); border-radius:12px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
  appearance:none;
}
.textarea{ min-height:130px; resize:vertical; line-height:1.6; }
.select{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234d626f' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem; }
.input::placeholder,.textarea::placeholder{ color:var(--stone-400); }
.input:focus,.select:focus,.textarea:focus{ outline:0; border-color:var(--crystal-500); box-shadow:var(--ring); background:#fbfdff; }
.field.error .input,.field.error .textarea,.field.error .select{ border-color:var(--red-500); box-shadow:0 0 0 3px rgba(192,57,43,.15); }
.field .err-msg{ font-size:.78rem; color:var(--red-600); font-weight:600; display:none; }
.field.error .err-msg{ display:block; }

/* Input with leading icon */
.input-ico{ position:relative; }
.input-ico svg{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--stone-400); width:18px; height:18px; }
.input-ico .input{ padding-left:2.6rem; }

/* Custom checkboxes / radios */
.check{ display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; font-weight:500; color:var(--ink-soft); }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check .box{ flex:0 0 auto; width:22px; height:22px; border-radius:7px; border:2px solid var(--border-strong);
  background:#fff; display:grid; place-items:center; margin-top:.05rem; transition:all var(--t-fast); }
.check .box svg{ width:14px; height:14px; color:#fff; opacity:0; transform:scale(.5); transition:all var(--t-fast); }
.check input:checked + .box{ background:var(--grad-brand); border-color:var(--brand-500); }
.check input:checked + .box svg{ opacity:1; transform:scale(1); }
.check input:focus-visible + .box{ box-shadow:var(--ring); }
.check--radio .box{ border-radius:50%; }

/* Selectable option grid (goals / categories / websites) */
.opt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; }
.opt label{ display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; border:1.5px solid var(--border-strong);
  border-radius:12px; background:#fff; cursor:pointer; font-weight:600; color:var(--ink-soft); height:100%;
  transition:all var(--t-fast); }
.opt label .dot{ width:18px; height:18px; border-radius:6px; border:2px solid var(--border-strong); flex:0 0 auto; display:grid; place-items:center; }
.opt input:checked + label{ border-color:var(--crystal-500); background:var(--stream-50); box-shadow:var(--ring); color:var(--river-900); }
.opt input:checked + label .dot{ background:var(--grad-brand); border-color:var(--brand-500); }
.opt input:checked + label .dot::after{ content:""; width:8px; height:8px; border-radius:3px; background:#fff; }
.opt input:focus-visible + label{ box-shadow:var(--ring); }

/* File dropzone */
.dropzone{ border:2px dashed var(--border-strong); border-radius:14px; background:var(--stream-50);
  padding:1.6rem; text-align:center; color:var(--text-muted); cursor:pointer; transition:all var(--t-fast); }
.dropzone:hover,.dropzone.drag{ border-color:var(--crystal-500); background:#eef8fe; color:var(--river-800); }
.dropzone .di{ width:40px; height:40px; margin:0 auto .6rem; color:var(--brand-500); }
.dropzone input{ display:none; }
.dropzone .files{ margin-top:.7rem; font-size:.82rem; font-weight:700; color:var(--river-800); }

/* Range slider (budget) */
.range-wrap{ display:flex; flex-direction:column; gap:.5rem; }
.range-val{ font-family:var(--font-head); font-weight:700; font-size:1.3rem; color:var(--river-900); }
input[type=range].range{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:8px;
  background:linear-gradient(90deg,var(--crystal-500),var(--brand-500)) no-repeat, var(--fog);
  background-size:50% 100%; }
input[type=range].range::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:#fff; border:3px solid var(--brand-500); box-shadow:var(--shadow); cursor:pointer; }
input[type=range].range::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:#fff;
  border:3px solid var(--brand-500); box-shadow:var(--shadow); cursor:pointer; }

/* Fieldset step card */
.fieldset{ border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(1.3rem,3vw,2rem);
  background:#fff; box-shadow:var(--shadow-xs); }
.fieldset > legend, .fieldset .legend{ font-family:var(--font-head); font-weight:600; font-size:1.35rem; color:var(--river-900);
  padding:0; margin-bottom:.3rem; display:flex; align-items:center; gap:.7rem; }
.fieldset .step-n{ width:34px; height:34px; border-radius:50%; background:var(--grad-brand); color:#fff;
  display:grid; place-items:center; font-family:var(--font-body); font-weight:800; font-size:.95rem; flex:0 0 auto; }
.fieldset .legend-sub{ color:var(--text-muted); margin-bottom:1.4rem; font-size:.95rem; }

/* Signature line */
.sig{ border-bottom:2px solid var(--border-strong); }

/* Consent row */
.consent{ background:var(--stream-50); border:1px solid var(--stream-200); border-radius:12px; padding:1rem 1.2rem; }