/* ==========================================================================
   India Square - participant registration + donate popup
   --------------------------------------------------------------------------
   Everything is scoped under #newpopup, so this file cannot affect any other
   part of the page.  It overrides Bootstrap 3's modal geometry only inside
   that one modal; Bootstrap's own show/hide and data-dismiss behaviour is
   untouched, so no script changes are needed.
   ========================================================================== */

#newpopup .isrp,
#donatepopup .isrp {
  --mar:  #6e1b14;   /* maroon      */
  --mard: #54120d;
  --cream:#fbf2e4;
  --cream2:#f5e7d2;
  --gold: #f2a93b;   /* marigold    */
  --goldink:#3a2405;
  --ink:  #2a1a16;
  --body: #5d4a44;
  --mut:  #8d7a72;
  --line: #e2d4c4;
  --line2:#eadcc9;
  --grey: #6e6862;   /* close button */
  --greybg:#f4f2f0;
  --greyln:#d8d4cf;
  --disp: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', Arial, Helvetica, sans-serif;
}

/* ---- modal frame ------------------------------------------------------- */
#newpopup .modal-dialog,
#donatepopup .modal-dialog {
  width: 560px !important;
  max-width: calc(100% - 24px);
  margin: 40px auto;
}
#newpopup .modal-content,
#donatepopup .modal-content {
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 70px rgba(30,10,6,.42) !important;
  overflow: hidden;
  background: #fff;
}
#newpopup .modal-body,
#donatepopup .modal-body { padding: 0 !important; }
#newpopup .isrp,
#newpopup .isrp * { box-sizing: border-box; }
#newpopup .isrp {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--body);
  text-align: left;
  line-height: 1.5;
}
#newpopup .isrp a { color: var(--mar); text-decoration: none; }
#newpopup .isrp a:hover { color: var(--mard); text-decoration: underline; }

/* ---- header ------------------------------------------------------------ */
#newpopup .isrp-hd { padding: 18px 24px; background: var(--gold); }
#newpopup .isrp-hd h4 {
  margin: 0; font-family: var(--disp); font-size: 21px; font-weight: 600;
  color: var(--goldink); letter-spacing: -.01em; line-height: 1.3;
}
#newpopup .isrp-hd p {
  margin: 3px 0 0; font-size: 12.5px; color: rgba(58,36,5,.72);
}

/* ---- donate band ------------------------------------------------------- */
#newpopup .isrp-donate {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 24px; background: var(--cream);
  border-bottom: 1px solid var(--line2);
}
#newpopup .isrp-qr {
  flex: 0 0 auto; display: block; padding: 10px; line-height: 0;
  background: #fff; border: 1px solid var(--line2); border-radius: 12px;
  box-shadow: 0 2px 8px rgba(84,18,13,.07);
}
#newpopup .isrp-qr img {
  display: block; width: 150px; height: 150px; border: 0; border-radius: 4px;
}
#newpopup .isrp-donate h5 {
  margin: 0 0 6px; font-family: var(--disp); font-size: 20px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
}
#newpopup .isrp-donate p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--body); }
#newpopup .isrp-donate .isrp-note { margin-top: 8px; font-size: 11.5px; color: var(--mut); }

/* ---- form -------------------------------------------------------------- */
#newpopup .isrp-form { padding: 22px 24px; }
#newpopup .isrp-eyebrow {
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid #efe2d2;
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mut);
}
#newpopup .isrp-grid { display: block; }
#newpopup .isrp-row { display: flex; gap: 14px; margin-bottom: 14px; }
#newpopup .isrp-col { flex: 1 1 0; min-width: 0; }
#newpopup .isrp-col label {
  display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 600;
  color: var(--ink); font-family: var(--sans);
}
#newpopup .isrp-col .isrp-req { color: #b3261e; }
#newpopup .isrp-col input[type="text"],
#newpopup .isrp-col input[type="email"],
#newpopup .isrp-col input[type="tel"] {
  display: block; width: 100%; height: 44px; margin: 0; padding: 0 14px;
  font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: none; outline: 0;
  -webkit-appearance: none; appearance: none;
}
#newpopup .isrp-col input::-webkit-input-placeholder { color: var(--mut); }
#newpopup .isrp-col input::placeholder { color: var(--mut); }
#newpopup .isrp-col input:focus {
  border-color: var(--mar); box-shadow: 0 0 0 3px rgba(110,27,20,.15);
}
#newpopup .isrp-col.is-bad input { border-color: #b3261e; }
#newpopup .isrp-err {
  display: none; margin: 5px 0 0; font-size: 12px; font-weight: 600; color: #b3261e;
}
#newpopup .isrp-col.is-bad .isrp-err { display: block; }

/* bootstrap sets label{font-weight:bold} - the agree line is body copy */
#newpopup .isrp-agree {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; font-weight: 400; font-size: 13.5px; color: var(--body); cursor: pointer;
}
#newpopup .isrp-agree a { font-weight: 600; }
#newpopup .isrp-agree input[type="checkbox"] {
  flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0;
}
#newpopup .isrp-agree.is-bad { color: #b3261e; }

/* ---- footer ------------------------------------------------------------ */
#newpopup .isrp-ft {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 24px; background: var(--cream2); border-top: 1px solid var(--line2);
}
/* Register - the only coloured button in the popup */
#newpopup .isrp-go {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 26px; border-radius: 999px;
  border: 1px solid var(--mar); background: var(--mar); color: #fff;
  font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.2;
  cursor: pointer;
}
#newpopup .isrp-go:hover { background: var(--mard); border-color: var(--mard); color: #fff; }
/* Close - the only way out, and deliberately faint: no chip, no border, just
   a light glyph and the word, at rgba(42,26,22,.22).  It keeps the word so it
   stays identifiable and a 34px tall hit area so it stays clickable, and it
   comes up to full strength on hover and on keyboard focus. */
#newpopup .isrp-close {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 8px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(42,26,22,.22);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; line-height: 1;
  cursor: pointer; opacity: 1; float: none; text-shadow: none;
  transition: color .15s ease, background-color .15s ease;
}
#newpopup .isrp-close:hover,
#newpopup .isrp-close:focus {
  background: rgba(42,26,22,.06); color: rgba(42,26,22,.72); opacity: 1; outline: 0;
}
#newpopup .isrp-close svg {
  width: 13px; height: 13px; display: block; flex: 0 0 auto; stroke-width: 2;
}

/* ---- phones ------------------------------------------------------------ */
@media (max-width: 600px) {
  #newpopup .modal-dialog { margin: 16px auto; }
  #newpopup .isrp-hd { padding: 15px 18px; }
  #newpopup .isrp-hd h4 { font-size: 18px; }
  #newpopup .isrp-donate {
    flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px;
  }
  #newpopup .isrp-qr img { width: 128px; height: 128px; }
  #newpopup .isrp-form { padding: 18px; }
  #newpopup .isrp-row { flex-direction: column; gap: 14px; }
  #newpopup .isrp-ft { padding: 14px 18px; }
  #newpopup .isrp-go { padding: 12px 20px; }
}


/* ==========================================================================
   The donation poster, shown after the registration popup closes.
   Same frame, same faint Close - only the contents differ.
   ========================================================================== */
#donatepopup .modal-dialog { width: 558px !important; }   /* 10% smaller */
#donatepopup .isrp-poster { background: #fff; }
#donatepopup .isrp-poster > a { display: block; line-height: 0; }
#donatepopup .isrp-poster img {
  display: block; width: 100%; height: auto; border: 0;
}
#donatepopup .isrp-ft--solo { justify-content: flex-start; }
#donatepopup .isrp,
#donatepopup .isrp * { box-sizing: border-box; }
#donatepopup .isrp-close {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 8px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(42,26,22,.22);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; line-height: 1;
  cursor: pointer; opacity: 1; float: none; text-shadow: none;
  transition: color .15s ease, background-color .15s ease;
}
#donatepopup .isrp-close:hover,
#donatepopup .isrp-close:focus {
  background: rgba(42,26,22,.06); color: rgba(42,26,22,.72); opacity: 1; outline: 0;
}
#donatepopup .isrp-close svg { width: 13px; height: 13px; display: block; flex: 0 0 auto; }

@media (max-width: 600px) {
  #donatepopup .modal-dialog { width: auto !important; margin: 16px auto; }
}


/* ==========================================================================
   Saving state, success panel, honeypot
   ========================================================================== */

/* off-screen rather than display:none - bots skip hidden fields, which is
   the whole point of a honeypot */
#newpopup .isrp-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

#newpopup .isrp-fail {
  display: none; margin: 14px 0 0; padding: 10px 14px;
  background: #fdeceb; border: 1px solid #f2c4c0; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #b3261e;
}
#newpopup.is-failed .isrp-fail { display: block; }

#newpopup .isrp-go[disabled] { opacity: .6; cursor: default; }

/* success replaces the form; the donate band above it stays put */
#newpopup .isrp-done { display: none; padding: 34px 24px 30px; text-align: center; }
#newpopup.is-done .isrp-done { display: block; }
#newpopup.is-done .isrp-form { display: none; }
#newpopup.is-done .isrp-go { display: none; }
#newpopup .isrp-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 16px;
  border-radius: 50%; background: #e8f2e9; color: #2f6b3a;
}
#newpopup .isrp-tick svg { width: 26px; height: 26px; display: block; }
#newpopup .isrp-done h5 {
  margin: 0 0 8px; font-family: var(--disp); font-size: 22px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
}
#newpopup .isrp-done p {
  margin: 0 auto; max-width: 380px; font-size: 14px; line-height: 1.6; color: var(--body);
}
#newpopup.is-done .isrp-ft { justify-content: center; }


/* ==========================================================================
   STAND-ALONE MODE
   --------------------------------------------------------------------------
   Donate.aspx runs through Site1.Master, which has jQuery but no Bootstrap -
   neither its CSS nor its JS.  When the script finds no Bootstrap it puts
   .isrp-standalone on <html>, and these rules supply the handful of modal
   styles Bootstrap would have provided.  On Default.aspx the class is never
   set, so none of this applies and Bootstrap stays in charge.
   ========================================================================== */

.isrp-standalone #newpopup,
.isrp-standalone #donatepopup {
  display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1050; overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.isrp-standalone #newpopup .modal-dialog,
.isrp-standalone #donatepopup .modal-dialog {
  position: relative; margin: 40px auto;
}
.isrp-standalone #newpopup .modal-content,
.isrp-standalone #donatepopup .modal-content {
  position: relative; background: #fff;
}
.isrp-standalone #newpopup .modal-body,
.isrp-standalone #donatepopup .modal-body { position: relative; }

#isrp-backdrop {
  display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1040; background: #241310; opacity: .78;
}
body.isrp-locked { overflow: hidden; }

.isrp-standalone #newpopup .isrp,
.isrp-standalone #donatepopup .isrp { position: relative; z-index: 1; }