/* =========================================================
   PLEDGE PAGE (pledge.html) – matches Services/Products style
   Scope: body.page-pledge only
   ========================================================= */


/* Hide field visually but keep it in the form submission */
.page-pledge .field-hidden{
  display: none !important;
}

/* Hide account/password row until we know user is new */
.page-pledge .password-row {
  display: none;
}


/* Constrain to a comfortable max width like other pages */
.page-pledge .pledge-section .section-inner {
  max-width: 1200px;
  margin: 0 auto;
}
/* Make pledge form grids behave like the rest of the site */
.page-pledge .grid {
  display: grid;
  gap: 16px;
  align-items: start;
}

/* 3 fields in one row */
.page-pledge .grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 2 fields in one row */
.page-pledge .grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Make sure inputs don’t force columns wider */
.page-pledge .grid label {
  min-width: 0;
}
.page-pledge .grid input,
.page-pledge .grid select,
.page-pledge .grid textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Responsive fallback */
@media (max-width: 980px) {
  .page-pledge .grid.three {
    grid-template-columns: 1fr;
  }
  .page-pledge .grid.two {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Main form "card" – similar to product-stack / pledge-card
   ========================================================= */

.page-pledge .pledge-form {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(123, 31, 27, 0.18);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(45, 28, 16, 0.14);
  overflow: hidden;
  padding: clamp(18px, 2.2vw, 28px);
}

/* Smaller labels + inputs (pledge page only) */
.page-pledge .pledge-form label {
  font-size: 0.9rem;          /* label text */
  font-weight: 500;
  line-height: 1.25;
  margin-top: 8px;
}


.page-pledge .pledge-form textarea {
  font-size: 0.95rem;         /* input text */
  padding: 10px 12px;         /* smaller box */
  border-radius: 14px;      
  min-height: 120px;
}


/* Eyebrow like site sections */
.page-pledge .section-eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--temple-leaf);
}

/* Title matches site maroon */
.page-pledge .section-title {
  margin: 0 0 10px;
  color: var(--temple-maroon);
}

.page-pledge .section-lede,
.page-pledge .product-option,
.page-pledge .installmentFrequencyOptions-option {
  margin: 0 0 14px;
  color: rgba(15, 23, 42, 0.75);
  font-size: 0.75rem;
}

/* Form sections spacing */
.page-pledge .form-section {
  padding: 18px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.page-pledge .form-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-pledge .section-title,
.page-pledge .form-section > h3.section-title {
  color: var(--temple-maroon);
  font-weight: 600;   /* matches product-tab */
  line-height: 1.1;   /* close to product-tab but safer for headings */
}

/* Optional: if you want them slightly smaller/larger */
.page-pledge .section-title {
  font-size: 1rem; 
}

.page-pledge h3.section-title {
  padding-top: 4px;
}

/* Don’t add extra space on the very first h3 in a section */
.page-pledge .form-section > h3.section-title:first-child {
  padding-top: 0;
  margin-top: 0;
}

/* If you also want small label-like headings (like “Email”) */
.page-pledge label,
.page-pledge .contact-label {
  color: var(--temple-maroon);
  font-weight: 600;
}

/* .page-pledge .pledge-form .grid input,
.page-pledge .pledge-form .grid select,
.page-pledge .pledge-form .grid textarea {
  margin-bottom: 10px;
} */


/* =========================================================
   Lookup row (Email + Check button) – clean inline layout
   ========================================================= */


.page-pledge .pledge-lookup-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  color: rgba(15, 23, 42, 0.78);
  text-transform: uppercase;
}

.page-pledge .pledge-lookup-field input {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  border: 2px solid rgba(15, 23, 42, 0.22);
  background: #fff;
  padding: 12px 14px;
  border-radius: 999px; /* matches site buttons */
  outline: none;
}

.page-pledge .pledge-top-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) auto auto minmax(420px, 1.4fr);
   /* grid-template-columns: 
    minmax(240px, 1.6fr) 
    auto 
    auto 
    minmax(180px, 1fr) 
    minmax(180px, 1fr); */
  gap: 14px;
  align-items: end;
  margin-top: 10px;
}

.page-pledge .pledge-top-row > .pledge-lookup-field,
.page-pledge .pledge-top-row > label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-pledge .pledge-top-row input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}


.page-pledge .password-row {
  display: none; /* hidden initially */
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
  min-width: 0;
}

.page-pledge .password-row label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-pledge .password-row input,
.page-pledge .pledge-lookup-field input {
  width: 100%;
  box-sizing: border-box;
}

.page-pledge #lookupBtn,
.page-pledge #clearBtn {
  height: 40px;
  min-height: 40px;
  padding: 0 24px;
  align-self: end;
  white-space: nowrap;
}

/* @media (max-width: 1100px) { */
@media (max-width: 900px) {
  .page-pledge .pledge-top-row {
    grid-template-columns: 1fr;
  }
}

.page-pledge .pledge-lookup-field input:focus {
  border-color: rgba(123, 31, 27, 0.45);
}

/* Hint + status */
.page-pledge .hint {
  margin-top: 10px;
  font-size: 0.75rem;
  color: rgba(15, 23, 42, 0.62);
  line-height: 1.5;
}

.page-pledge .status {
  margin-top: 10px;
  font-size: 0.75rem;
}

/* =========================================================
   Buttons – match Services tab look (pill + gradient primary)
   ========================================================= */

/* Base: make all pledge buttons consistent */
.page-pledge .btn,
.page-pledge button.btn {
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 42px;
  line-height: 1.2;
  font: inherit;
}

/* Primary style like "Make a pledge" */
.page-pledge .btn.primary,
.page-pledge button.btn.primary {
  border: none;
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(205, 106, 40, 1),
    rgba(123, 31, 27, 1)
  );
  box-shadow: 0 14px 28px rgba(45, 28, 16, 0.18);
}

.page-pledge .btn.primary:hover,
.page-pledge button.btn.primary:hover {
  filter: brightness(0.98);
}

/* If you use outline anywhere in pledge page */
.page-pledge .btn.outline,
.page-pledge button.btn.outline {
  background: rgba(255, 255, 255, 0.75);
  border: 2px solid rgba(123, 31, 27, 0.45);
  color: var(--temple-maroon);
}

/* IMPORTANT: remove any unwanted thick outline on active/focus */
.page-pledge button:focus,
.page-pledge .btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(205, 106, 40, 0.18);
}

/* =========================================================
   Inputs inside the form – match site feel
   ========================================================= */

.page-pledge input[type="text"],
.page-pledge input[type="email"],
.page-pledge input[type="tel"],
.page-pledge input[type="password"],
.page-pledge input[type="number"],
.page-pledge input[type="date"],
.page-pledge select,
.page-pledge textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  /* font-size: 1rem; */
  border: 2px solid rgba(15, 23, 42, 0.22);
  background: #fff;
  padding: 8px 12px;
  min-height: 42px;
  border-radius: 18px;
  outline: none;
  box-sizing: border-box;
}

.page-pledge input:focus,
.page-pledge select:focus,
.page-pledge textarea:focus {
  border-color: rgba(123, 31, 27, 0.45);
}

/* Keep label text consistent */
.page-pledge label {
  color: rgba(15, 23, 42, 0.88);
}

.page-pledge label > input,
.page-pledge label > select {
  margin-top: 8px;
}

.page-pledge #productOptions .product-radio,
.page-pledge .installmentFrequency-radio {
  min-height: 44px;
}

.page-pledge .product-radio,
.page-pledge .installmentFrequency-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  white-space: nowrap;
}

.page-pledge .product-radio input[type="radio"],
.page-pledge .installmentFrequency-radio input[type="radio"] {
  margin: 0;
  flex: 0 0 auto;
}

.page-pledge .product-radio span,
.page-pledge .installmentFrequency-radio span {
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
} 

/* Radio group layout */
.page-pledge #productOptions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px 18px;      /* row gap, column gap */
  align-items:center;
  margin-top: 10px;
}

/* Each radio label */
/* .page-pledge #productOptions .product-radio {
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
} */

/* Force Other Amount + its input onto a new row */
.page-pledge #productOptions .other-amount-row {
  flex-basis:100%;
  display:grid;
  grid-template-columns:auto minmax(260px, 520px);
  gap:14px;
  align-items:end;
  margin-top: 6px;
}

/* Make your existing wrapper look like a compact field */
.page-pledge #productOptions .other-amount-field label{
  display:block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.page-pledge #productOptions .other-amount-field input{
  height: 40px;
  padding: 8px 12px;
  border-radius: 16px;
}

@media (max-width: 720px){
  .page-pledge #productOptions .other-amount-row{
    grid-template-columns:1fr;
    max-width:100%;
  }
}

.page-pledge #otherAmountWrapper {
  display: none;
}

.page-pledge #otherAmountWrapper.is-visible {
  display: grid;
}


/* Main 2-col layout for pledge page */
.page-pledge .pledge-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 26px;
  align-items:start;
  margin-top: 18px;
}


/* make sections look like neat cards inside the form */
.page-pledge .pledge-col .form-section {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: 16px 16px 14px;
}

/* label used above products list */
.page-pledge .field-label{
  margin: 10px 0 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--temple-maroon); /* same “feel” as product-tab */
}

/* responsive: collapse to single column */
@media (max-width: 980px){
  .page-pledge .pledge-layout{
    grid-template-columns: 1fr;
  }
  /* .page-pledge .pledge-full{
    grid-column: auto;
  } */
}



/* =========================================================
   Pledge summary area – tidy
   ========================================================= */

.page-pledge .pledge-stack {
  display: grid;
  gap: 18px;
}

.page-pledge .field-block {
  display: grid;
  gap: 8px;
}

.page-pledge .field-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--temple-maroon);
  margin-top: 8px;
}

.page-pledge .compact-fields {
  gap: 16px;
}

.page-pledge .helper-text {
  font-size: 0.75rem;
  color: rgba(15,23,42,0.68);
  background: rgba(123,31,27,0.04);
  border-radius: 12px;
  padding: 10px 12px;
}

.page-pledge .amount-chips,
.page-pledge .frequency-chips,
.page-pledge .payment-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-pledge .amount-chips label,
.page-pledge .frequency-chips label,
.page-pledge .payment-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  margin: 0;
}

.page-pledge .summary-card {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 18px;
}

.page-pledge .summary-title {
  margin: 0;
  color: var(--temple-maroon);
}

.page-pledge .summary-box {
  display: grid;
  gap: 12px;
}

.page-pledge .summary-row,
.page-pledge .summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.page-pledge .summary-row {
  font-size: 1rem;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}


.page-pledge .payment-panel {
  display: grid;
  gap: 10px;
}

.page-pledge .submit-btn {
  width: 100%;
  justify-content: center;
}

.page-pledge .pledge-col {
  display: grid;
  gap: 20px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 720px) {

  .page-pledge #lookupBtn {
    width: 100%;
    justify-content: center;
  }
}