/* =============================================================================
   CHABAD OF MALIBU — Chai Club form skin  (v12: tiers as columns)
     <link rel="stylesheet" href="https://polite-sawine-296a46.netlify.app/chai-club-form.css?v=12" />
   Scoped to body:has(form[id="7440363"]) and form[id="7440363"] only.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap");

/* ===== PAGE COMPOSITION (this form page only) ============================== */
body:has(form[id="7440363"]) { background: #eef6fc !important; }
body:has(form[id="7440363"]) .cco_templatelates_content,
body:has(form[id="7440363"]) #cco_body,
body:has(form[id="7440363"]) #co_content_container,
body:has(form[id="7440363"]) .content,
body:has(form[id="7440363"]) article.content { background: transparent !important; }

/* ===== FORM AS A CENTERED WHITE CARD ====================================== */
form[id="7440363"] .form-all {
  font-family: Inter, Arial, sans-serif;
  color: #0c3f63;
  max-width: 780px;
  margin: 28px auto 40px auto;
  padding: 34px 40px 40px 40px;
  background: #ffffff;
  border: 1px solid #dbe8f2;
  box-shadow: 0 14px 36px rgba(15,108,184,.10);
  font-size: 15px;
  box-sizing: border-box;
  overflow: hidden;               /* keep the bled hero corners tidy */
}
form[id="7440363"] .form-line {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #eef4f9;
}

/* ===== LABELS ============================================================== */
form[id="7440363"] .form-label,
form[id="7440363"] .form-label-left,
form[id="7440363"] .form-label-right {
  font-family: Poppins, Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #0c3f63 !important;
}
form[id="7440363"] .form-required { color: #0F6CB8; }
form[id="7440363"] .form-sub-label { color: #6b8394; font-family: Inter, Arial, sans-serif; }

/* ===== TEXT INPUTS + DROPDOWNS ============================================= */
form[id="7440363"] .form-textbox,
form[id="7440363"] .form-dropdown {
  border: 1px solid #cfe0ee !important;
  border-radius: 0 !important;
  padding: 11px 13px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 15px !important;
  color: #0c3f63 !important;
}
form[id="7440363"] .form-textbox:focus,
form[id="7440363"] .form-dropdown:focus {
  border-color: #0F6CB8 !important;
  outline: 2px solid #2fd3c2 !important;
  outline-offset: 1px;
}

/* ===== MONTHLY AMOUNT OPTIONS -> GRID OF CARDS ============================ */
form[id="7440363"] #cid_6 .clearfix { display: none !important; }
form[id="7440363"] #cid_6 .form-single-column {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
form[id="7440363"] #cid_6 .form-radio-item { display: block; margin: 0; }
form[id="7440363"] #cid_6 .form-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
form[id="7440363"] #cid_6 .form-radio-item label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 14px 12px;
  border: 2px solid #cfe0ee;
  border-radius: 0;
  cursor: pointer;
  font-family: Poppins, Georgia, serif;
  font-weight: 600;
  font-size: 16px;
  color: #0c3f63;
  background: #ffffff;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
form[id="7440363"] #cid_6 .form-radio-item label:hover { border-color: #0F6CB8; }
form[id="7440363"] #cid_6 .form-radio:checked + label { border-color: #0F6CB8; background: #0F6CB8; color: #ffffff; }
form[id="7440363"] #cid_6 .form-radio:focus + label { outline: 2px solid #2fd3c2; outline-offset: 2px; }

/* "Other" write-in amount: own full row, VISIBLE clickable radio, styled box */
form[id="7440363"] #cid_6 .form-radio-item:has(.form-radio-other) {
  grid-column: 1 / -1;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}
form[id="7440363"] #cid_6 .form-radio-item:has(.form-radio-other) .form-radio {
  position: static;
  opacity: 1;
  width: auto;
  height: auto;
  margin: 0;
  accent-color: #0F6CB8;
}
form[id="7440363"] #cid_6 .form-radio-other-input {
  flex: 1;
  box-sizing: border-box;
  border: 1px solid #cfe0ee;
  border-radius: 0;
  padding: 11px 13px;
  font-size: 15px;
  color: #0c3f63;
  font-family: Inter, Arial, sans-serif;
}

/* ===== CLICKABLE TIER CARDS ============================================== */
form[id="7440363"] .jm-tier-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
form[id="7440363"] .jm-tier-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(15,108,184,.15); }

/* ===== PAYMENT SECTION HEADERS ============================================ */
form[id="7440363"] .form-address-table th {
  font-family: Poppins, Georgia, serif !important;
  font-size: 16px !important;
  color: #0c3f63 !important;
  text-align: left !important;
  padding: 14px 0 6px 0 !important;
  border-bottom: 2px solid #2fd3c2 !important;
}

/* ===== TOTAL MONTHLY ====================================================== */
form[id="7440363"] #cid_8 { display: flex; align-items: baseline; }
form[id="7440363"] #total_amount {
  font-family: Poppins, Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  color: #0F6CB8;
}

/* ===== RECURRING CHECKBOX ROW ============================================= */
form[id="7440363"] #cid_10 .form-checkbox-item {
  background: #eef6fc;
  border: 1px solid #cfe0ee;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
form[id="7440363"] #cid_10 label { font-family: Poppins, Georgia, serif; font-weight: 600; color: #0c3f63; margin: 0; }
form[id="7440363"] #cid_10 input[type="checkbox"] { width: 18px; height: 18px; accent-color: #0F6CB8; }

/* ===== SUBMIT BUTTON ====================================================== */
form[id="7440363"] .form-buttons-wrapper { text-indent: 0 !important; text-align: center !important; padding-top: 8px !important; }
form[id="7440363"] .form-submit-button {
  background: #0F6CB8 !important;
  color: #ffffff !important;
  border: 2px solid #0F6CB8 !important;
  border-radius: 0 !important;
  font-family: Poppins, Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  padding: 15px 0 !important;
  width: 100% !important;
  max-width: 420px !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
form[id="7440363"] .form-submit-button:hover { background: #ffffff !important; color: #0F6CB8 !important; }

/* ===== MOBILE ============================================================= */
@media screen and (max-width: 600px) {
  form[id="7440363"] .form-all { padding: 22px 18px 28px 18px; }
  form[id="7440363"] #cid_6 .form-single-column { grid-template-columns: repeat(2, 1fr); }
}

/* ===== MEMBERS PANEL (injected by chai-club-members.js) ==================== */
/* Default: a centered block below the form. On wide screens it floats to the side. */
.jm-members-panel {
  max-width: 780px;
  margin: 28px auto 40px auto;
  padding: 22px 26px;
  background: #ffffff;
  border: 1px solid #dbe8f2;
  box-shadow: 0 8px 22px rgba(15,108,184,.08);
  font-family: Inter, Arial, sans-serif;
  color: #0c3f63;
  box-sizing: border-box;
}
.jm-members-title { font-family: Poppins, Georgia, serif; font-weight: 600; font-size: 20px; color: #0c3f63; margin: 0 0 18px 0; }
.jm-members-cols { display: flex; flex-wrap: wrap; gap: 22px 34px; }
.jm-members-tier { flex: 1 1 150px; min-width: 150px; max-width: 240px; margin: 0; }
.jm-members-tier-name { font-family: Poppins, Georgia, serif; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; margin-bottom: 8px; }
.jm-members-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex: none; }
.jm-members-list { list-style: none; margin: 0; padding: 0; }
.jm-members-list li { font-size: 14.5px; color: #3f5b6d; padding: 2px 0; }