/**
 * Custom CSS overrides for Ministry Platform widgets
 * Used via the `customcss` attribute on MP widget elements
 * to match the CITN brand and our custom widget styles.
 */

/* -- Override CSS Variables ---------------------------------------- */

:host {
  /* Brand colors */
  --primary: #F5A623;
  --secondary: #1f2937;

  /* Typography — override MP's --root-font (used by * { font-family: var(--root-font) }) */
  --root-font: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --root-text-color: #1f2937;
  --root-font-size: 14px;

  /* Form fields */
  --form-field-bgcolor: #f9fafb;
  --form-field-border: #d1d5db;
  --form-field-border--active: #F5A623;
  --form-field-color: #374151;
  --form-field-fontFamily: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --form-field-borderradius: 8px;
  --form-field-boxshadow--active: 0 0 0 3px rgba(245, 166, 35, 0.15);
  --form-valid: #16a34a;
  --form-invalid: #dc2626;

  /* Buttons */
  --form-btn-primary-bgcolor: #F5A623;
  --form-btn-primary-hover: #e09510;
  --form-btn-primary-active: #c88000;
  --form-btn-primary-text: #fff;
  --form-btn-secondary-text: #1f2937;
  --form-btn-secondary-bgcolor: #fff;
  --form-btn-secondary-hover: #fdf6e8;
  --form-btn-secondary-active: #faecd1;

  /* Cards */
  --card-bgcolor: #fff;
  --card-title-color: #1f2937;
  --card-header-bgcolor: #1f2937;
  --card-textColor: #1f2937;
  --card-borderRadius: 12px;
  --card-boxShadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --card-primaryColor: #F5A623;
  --card-badgeStatusActiveColor: #F5A623;
  --card-badgeStatusCompleteColor: #16a34a;
  --card-labelBgColor: #fdf6e8;

  /* Inner page */
  --innerPage-textColor: #1f2937;
  --innerPage-primaryColor: #F5A623;
  --innerPage-buttonBgColor: #F5A623;
  --innerPage-buttonHoverBgColor: #e09510;
  --innerPage-buttonActiveBgColor: #c88000;
  --innerPage-boxShadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --innerPage-borderRadius: 8px;
  --innerPage-labelBgColor: #fdf6e8;
  --innerPage-linkColor: #F5A623;
  --innerPage-linkHoverColor: #e09510;
  --innerPage-linkActiveColor: #c88000;

  /* Card row */
  --card-row-borderRadius: 12px;

  /* Progress bar */
  --progress-pledged: #F5A623;
  --progress-received: #1f2937;
  --card-progressBarColor: #F5A623;
  --card-progressBarActiveColor: linear-gradient(90deg, #F5A623 0%, #e09510 100%);
  --card-progressBarCompleteColor: #16a34a;
}

/* -- Typography --------------------------------------------------- */

.mppw-component-container {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.625 !important;
  color: #1f2937;
}

/* Force all paragraphs and text inside event details to 16px */
.mppw-component-container p,
.mppw-component-container span,
.mppw-component-container div {
  font-size: 16px !important;
  line-height: 1.625 !important;
}

/* -- Headings ----------------------------------------------------- */

.mppw-component-container h1 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 16px;
}

.mppw-component-container h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #1f2937;
}

.mppw-component-container h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: #1f2937;
}

/* -- Buttons ------------------------------------------------------ */

.mppw-btn {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.1s ease;
}

.mppw-btn:active {
  transform: scale(0.98);
}

.mppw-btn.secondary {
  border-radius: 8px;
  border-color: #d1d5db;
  color: #1f2937;
}

/* -- Form Fields -------------------------------------------------- */

.mppw-form-field__control {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  border-radius: 8px;
  border-color: #d1d5db;
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mppw-form-field__control:focus {
  border-color: #F5A623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
}

.mppw-form-field__label {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  color: #6b7280;
  font-size: 14px;
}

/* -- Cards -------------------------------------------------------- */

.mpp-card {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.mpp-card--header {
  background: #1f2937;
}

.mpp-card--title {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  color: #1f2937;
}

.mpp-card--label {
  background: #fdf6e8;
  border-radius: 6px;
  color: #F5A623;
  font-size: 13px;
}

.mpp-card--footer .mppw-btn {
  width: 100%;
}

/* -- Household Widget --------------------------------------------- */

.mpp-household {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  margin-bottom: 16px;
}

.mpp-household h1 {
  font-size: 20px;
  line-height: 28px;
}

.mpp-household h2 {
  font-size: 17px;
  line-height: 24px;
}

.mpp-household--header-wrapper {
  color: #F5A623;
  font-weight: 600;
  font-size: 14px;
}

.mpp-household--header-wrapper:hover,
.mpp-household--header-wrapper:focus {
  color: #e09510;
}

.mpp-household--header-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.mpp-icon--household {
  width: 16px;
  height: 16px;
}

/* Household member cards */
.mppw-card--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.mpp-card--household {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.mpp-card--household:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mpp-card--household-image {
  border-radius: 50%;
  width: 64px;
  height: 64px;
  min-width: 64px;
  border: 2px solid #e5e7eb;
}

.mpp-card--household-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 15px;
}

.mpp-card--household-body p {
  color: #6b7280;
  font-size: 13px;
  margin: 2px 0;
}

.mpp-card--edit-household-btn {
  background: #F5A623;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  box-shadow: none;
  transition: background 0.15s ease;
}

.mpp-card--edit-household-btn:hover {
  background: #e09510;
}

/* Household address area */
.mpp-innerpage--labels {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

.mpp-innerpage--label {
  background: #fdf6e8;
  border-radius: 6px;
  color: #F5A623;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
}

.mpp-innerpage--address-label {
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
}

.mpp-innerpage--address {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
}

.mpp-innerpage--address-line {
  color: #374151;
  font-size: 14px;
  line-height: 1.5;
}

/* Household form */
.mpp-household .mppw-form .mpp-household--form-body {
  padding: 20px 24px;
}

.mpp-household--form-header {
  color: #1f2937;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* -- Inner Page (Shared) ------------------------------------------ */

.mpp-innerpage {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

.mpp-innerpage a {
  color: #F5A623;
  font-weight: 500;
}

.mpp-innerpage a:hover {
  color: #e09510;
}

/* -- My Giving Widget --------------------------------------------- */

.mpp-giving h1,
.mpp-my-giving h1 {
  font-size: 20px;
  line-height: 28px;
}

/* -- My Pledges Widget -------------------------------------------- */

.mpp-pledges h1,
.mpp-my-pledges h1 {
  font-size: 20px;
  line-height: 28px;
}

/* -- Contribution Statement Widget -------------------------------- */

.mpp-contribution-statements h1,
.mpp-my-contribution-statement h1 {
  font-size: 20px;
  line-height: 28px;
}

/* -- Checkboxes (Go Paperless, etc.) ------------------------------ */

.mppw-checkbox {
  height: 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border-radius: 4px !important;
}

.mppw-checkbox:after {
  left: 5px !important;
  top: 2px !important;
  width: 3px !important;
  height: 7px !important;
}

.mppw-form-field__control > label {
  font-size: 13px;
  padding-left: 26px;
}

/* Card multiselect checkbox (Go Paperless, etc.) */
.mpp-card-multiselect--checkbox {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  gap: 8px !important;
}

/* Hide MP's custom styled span indicator */
.mpp-card-multiselect--checkbox span {
  display: none !important;
}

/* Show the native checkbox input that MP hides */
.mpp-card-multiselect--checkbox input[type="checkbox"] {
  display: inline-block !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: #F5A623 !important;
}

/* -- Toggle / Switch ---------------------------------------------- */

.mpp-toggle .toggle--label {
  background: #d1d5db;
  border-radius: 999px;
}

.mpp-toggle .toggle--input:checked + .toggle--label {
  background: #F5A623;
}

/* -- Alerts ------------------------------------------------------- */

.mppw-alert {
  border-radius: 8px;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

.mppw-alert__success {
  border-color: #16a34a;
  background-color: rgba(134, 173, 63, 0.1);
}

.mppw-alert__warning {
  border-color: #F5A623;
  background: rgba(245, 166, 35, 0.1);
}

.mppw-alert__danger {
  border-color: #dc2626;
  background: rgba(255, 109, 106, 0.1);
}

.mppw-alert__info {
  border-color: #2563eb;
  background: rgba(0, 156, 222, 0.1);
}

/* -- Card Row (Giving/Pledges) ------------------------------------ */

.mpp-card-row {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  margin-bottom: 16px;
}

.mpp-card-row--title {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  color: #1f2937;
}

.mpp-card-row--badge {
  border-radius: 6px;
}

/* -- Event Details Widget ----------------------------------------- */

.mppw-event-details,
.mpp-event-details {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  color: #1f2937;
  font-size: 16px !important;
  line-height: 1.625 !important;
  max-width: 100%;
}

.mppw-event-details *,
.mpp-event-details * {
  font-size: inherit;
  line-height: inherit;
}

.mppw-event-details h1,
.mpp-event-details h1 {
  font-size: 24px !important;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.mppw-event-details h2,
.mpp-event-details h2 {
  font-size: 20px !important;
  font-weight: 600;
  color: #1f2937;
  margin-top: 24px;
  margin-bottom: 12px;
}

.mppw-event-details h3,
.mpp-event-details h3 {
  font-size: 18px !important;
  font-weight: 600;
  color: #1f2937;
  margin-top: 16px;
  margin-bottom: 8px;
}

/* Description bold sub-headings (Schedule Overview, Pricing, etc.) */
.mppw-event-details strong,
.mppw-event-details b,
.mpp-event-details strong,
.mpp-event-details b {
  font-size: 18px !important;
  font-weight: 700;
}

/* Event image — hidden; the page header provides the visual context */
.mppw-event-details img,
.mpp-event-details img,
.mppw-component-container img {
  display: none !important;
}

/* Hide the MP placeholder/event image container (uses background-image, not <img>) */
.mpp-innerpage--fixed-imgcontainer {
  display: none !important;
}

/* Back to search link */
.mppw-event-details a,
.mpp-event-details a {
  color: #F5A623;
  font-weight: 500;
  font-size: 16px !important;
  text-decoration: none;
}

.mppw-event-details a:hover,
.mpp-event-details a:hover {
  color: #e09510;
  text-decoration: underline;
}

/* Event date/time line */
.mppw-event-date,
.mpp-event-date {
  color: #6b7280;
  font-size: 16px !important;
  margin-bottom: 12px;
}

/* Event description */
.mppw-event-description,
.mpp-event-description {
  color: #374151;
  font-size: 16px !important;
  line-height: 1.625 !important;
  margin-bottom: 20px;
}

/* Contact card */
.mppw-event-contact,
.mpp-event-contact {
  margin: 20px 0;
}

.mppw-event-contact-name,
.mpp-event-contact-name {
  font-weight: 600;
  color: #1f2937;
}

/* Location */
.mppw-event-location,
.mpp-event-location {
  color: #6b7280;
  font-size: 14px;
  margin: 12px 0 24px;
}

/* Product options tables (registration tiers, add-ons) */
.mppw-product-options {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.mppw-product-options thead th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  padding: 8px 12px;
  border-bottom: 2px solid #e5e7eb;
}

.mppw-product-options tbody td {
  padding: 10px 12px;
  font-size: 14px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.mppw-product-options tbody tr:hover {
  background: #f9fafb;
}

/* Radio buttons and checkboxes in product tables */
.mppw-product-options input[type="radio"],
.mppw-product-options input[type="checkbox"] {
  accent-color: #F5A623;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Quantity select / input */
.mppw-product-options select,
.mppw-product-options input[type="number"] {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  background: #f9fafb;
  color: #374151;
}

.mppw-product-options select:focus,
.mppw-product-options input[type="number"]:focus {
  border-color: #F5A623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
  outline: none;
}

/* Registration form fields */
.mppw-event-details input[type="text"],
.mppw-event-details input[type="email"],
.mppw-event-details input[type="tel"],
.mppw-event-details textarea,
.mppw-event-details select,
.mpp-event-details input[type="text"],
.mpp-event-details input[type="email"],
.mpp-event-details input[type="tel"],
.mpp-event-details textarea,
.mpp-event-details select {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #374151;
  background: #f9fafb;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mppw-event-details input[type="text"]:focus,
.mppw-event-details input[type="email"]:focus,
.mppw-event-details input[type="tel"]:focus,
.mppw-event-details textarea:focus,
.mppw-event-details select:focus,
.mpp-event-details input[type="text"]:focus,
.mpp-event-details input[type="email"]:focus,
.mpp-event-details input[type="tel"]:focus,
.mpp-event-details textarea:focus,
.mpp-event-details select:focus {
  border-color: #F5A623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
  outline: none;
}

/* Labels for registration form fields */
.mppw-event-details label,
.mpp-event-details label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  display: block;
  margin-bottom: 4px;
}

/* Promo code section */
.mppw-promo-code,
.mpp-promo-code {
  margin: 16px 0;
}

.mppw-promo-code input,
.mpp-promo-code input {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
}

/* Registration total */
.mppw-registration-total,
.mpp-registration-total {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin: 16px 0;
}

/* Action buttons (Register and Checkout, Add Another Person) */
.mppw-event-details .mppw-btn,
.mpp-event-details .mppw-btn {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.mppw-event-details .mppw-btn:active,
.mpp-event-details .mppw-btn:active {
  transform: scale(0.98);
}

/* Dropdown / select elements */
.mppw-event-details .mppw-dropdown,
.mpp-event-details .mppw-dropdown {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
}

/* -- Responsive (within modal context) ---------------------------- */

@media only screen and (max-width: 640px) {
  .mppw-card--grid {
    grid-template-columns: 1fr;
  }

  .mpp-card-row--main {
    display: block;
  }
}