:root {
  --cph-primary: #1d4ed8;
  --cph-primary-contrast: #ffffff;
  --cph-radius: 12px;
  --cph-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  --cph-border: rgba(0, 0, 0, .12);
  --cph-bg: rgba(255, 255, 255, .9);
  --cph-muted: rgba(0, 0, 0, .70);
}

/*
 * Frontend UI is intentionally small and builder-friendly.
 * Use CSS variables + scoped classes to avoid theme collisions.
 */

.cph-form {
  max-width: 100%
}

.cph-form__grid {
  display: grid;
  gap: 14px;
  align-items: start;
  grid-template-columns: 1fr
}

.cph-form__grid--two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.cph-field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.cph-field--half {
  grid-column: span 1
}

.cph-field--full {
  grid-column: 1/-1
}

.cph-actions {
  margin-top: 1rem
}

.cph-field label {
  font-weight: 600
}

.cph-field input,
.cph-field select,
.cph-field textarea {
  width: 100%;
  border: 1px solid var(--cph-border);
  border-radius: var(--cph-radius);
  padding: 0rem 10px;
  background: var(--cph-bg);
  color: #111;
  min-height: 40px;
  box-sizing: border-box;
}

.cph-field select {
  cursor: pointer;
}

.cph-field textarea {
  min-height: 140px;
  resize: vertical
}

.cph-field input:focus,
.cph-field select:focus,
.cph-field textarea:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--cph-primary) 55%, #000 0%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cph-primary) 20%, transparent);
}

/* Hard-hide honeypot, even if theme CSS is aggressive. */
.cph-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Native select caret (can be removed per field using .cph-select--noarrow). */
.cph-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,4 L5,7 L8,4' fill='none' stroke='rgba(0,0,0,0.55)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  line-height: 40px;
}

.cph-select--noarrow select {
  background-image: none;
  padding-right: 10px;
}

/* Radio field group */
.cph-field--radio>label {
  display: block
}

.cph-radio-group {
  display: grid;
  gap: 10px;
  margin-top: 6px
}

.cph-radio-group label {
  display: flex;
  gap: 10px;
  align-items: center;
  line-height: 1.3;
  font-weight: 500;
  margin: 0;
  text-align: left;
}

.cph-radio-group input[type="radio"] {
  margin-top: 0
}

/* Horizontal radio layout: left-aligned, wraps naturally */
.cph-radio-group--horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  align-items: center;
  justify-content: flex-start;
}

.cph-radio-group--horizontal label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  width: auto;
  white-space: normal;
  max-width: 100%;
  text-align: left;
}

.cph-radio-group--horizontal input[type="radio"] {
  width: auto;
  margin-top: 0
}

.cph-optional {
  font-weight: 400;
  opacity: .75;
  font-size: .95em
}

/* Checkbox */
.cph-field--checkbox label {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 500
}

.cph-field--checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto
}

/**
 * Combo (no-jQuery searchable single-select)
 * Used for Country (and optionally Campus when configured).
 */
.cph-combo {
  position: relative;
  display: block
}

.cph-combo__select {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.cph-combo__toggle {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--cph-bg);
  border: 1px solid var(--cph-border);
  border-radius: 12px;
  padding: 12px 12px;
  cursor: pointer;
  font-weight: 500
}

.cph-combo__caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border-right: 2px solid rgba(0, 0, 0, .55);
  border-bottom: 2px solid rgba(0, 0, 0, .55)
}

.cph-combo__panel {
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--cph-border);
  border-radius: 12px;
  box-shadow: var(--cph-shadow);
  padding: 10px;
  display: none;
  max-height: 280px;
  overflow: auto
}

.cph-combo.is-open .cph-combo__panel {
  display: block
}

.cph-combo__search {
  width: 100%;
  margin: 0 0 8px
}

.cph-combo__options {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.cph-combo__option {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.cph-combo__option:hover {
  background: rgba(0, 0, 0, .04)
}

.cph-combo__option.is-selected {
  background: color-mix(in srgb, var(--cph-primary) 12%, #fff)
}

.cph-combo__check {
  opacity: .75
}

.cph-combo--noarrow .cph-combo__caret {
  display: none
}

.cph-field input:focus,
.cph-field select:focus,
.cph-field textarea:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--cph-primary) 55%, #000 0%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cph-primary) 20%, transparent);
}

.cph-field textarea {
  min-height: 140px;
  resize: vertical
}

.cph-field select {
  min-height: 44px
}

.cph-field--radio label {
  display: block
}

.cph-radio-group {
  display: grid;
  gap: 8px;
  margin-top: 6px
}

.cph-radio-group label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 500;
  margin: 0
}

.cph-radio-group input[type="radio"] {
  margin-top: 0
}

/* Horizontal radio layout: keep options neatly left-aligned and compact */
.cph-radio-group--horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  align-items: center;
  justify-content: flex-start
}

.cph-radio-group--horizontal label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  white-space: normal;
  max-width: 100%;
  text-align: left
}

.cph-radio-group--horizontal input[type="radio"] {
  width: auto;
  margin-top: 0
}

.cph-optional {
  font-weight: 400;
  opacity: .75;
  font-size: .95em
}

.cph-field--checkbox label {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 500
}

.cph-field--checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto
}

/* Dropdown multiselect (no jQuery). */
/**
 * Dropdown multiselect (no jQuery).
 * Used for Prayer Categories (and other multi-selects).
 */
.cph-mselect {
  position: relative
}

.cph-mselect__toggle {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--cph-border);
  border-radius: var(--cph-radius);
  padding: 12px 12px;
  background: var(--cph-bg);
  cursor: pointer;
  font-weight: 500;
  min-height: 44px;
}

.cph-mselect__caret {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border-right: 2px solid rgba(0, 0, 0, .55);
  border-bottom: 2px solid rgba(0, 0, 0, .55);
  margin-left: 8px;
}

.cph-mselect__panel {
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--cph-border);
  border-radius: var(--cph-radius);
  box-shadow: var(--cph-shadow);
  padding: 10px;
  display: none;
}

.cph-mselect.is-open .cph-mselect__panel {
  display: block
}

.cph-mselect__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow: auto
}

.cph-mselect__option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500
}

.cph-mselect__option input {
  width: 18px;
  height: 18px
}

.cph-mselect--noarrow .cph-mselect__caret {
  display: none
}

/* Buttons */
.cph-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--cph-radius);
  padding: 12px 16px;
  border: 1px solid transparent;
  background: var(--cph-primary);
  color: var(--cph-primary-contrast);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.cph-button:hover {
  filter: brightness(.96)
}

.cph-button:focus {
  outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cph-primary) 20%, transparent)
}

.cph-button--secondary {
  background: transparent;
  color: var(--cph-primary);
  border-color: color-mix(in srgb, var(--cph-primary) 35%, transparent);
}

@media (max-width: 640px) {
  .cph-form__grid--two-col {
    grid-template-columns: 1fr
  }

  .cph-field--half {
    grid-column: 1/-1
  }
}

/* ------------------------------------------------------------
 * Modal (frontend)
 * ------------------------------------------------------------ */

html.cph-modal-open,
body.cph-modal-open {
  overflow: hidden
}

.cph-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}

.cph-modal.is-open {
  display: block
}

.cph-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}

.cph-modal__dialog {
  position: relative;
  width: min(92vw, 860px);
  margin: 6vh auto;
  background: var(--cph-modal-bg, #ffffff);
  color: var(--cph-modal-color, #111111);
  border-radius: var(--cph-modal-radius, 14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  max-height: 92vh;
  overflow: hidden;
  padding: var(--cph-modal-padding, 16px);
  box-sizing: border-box;
}

.cph-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

.cph-modal__title {
  margin: 0 0 12px 0;
  padding-right: 40px
}

.cph-modal__body {
  overflow: auto;
  max-height: calc(92vh - 90px);
}

@media (max-width: 640px) {
  .cph-modal__dialog {
    margin: 2vh auto;
    width: min(96vw, 860px);
    max-height: 96vh
  }

  .cph-modal__body {
    max-height: calc(96vh - 90px)
  }
}


/* CPH Taxonomies */
.cph-taxonomies__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}

.cph-taxonomies__pill {
  display: inline-block;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  font-size: .85em;
  line-height: 1.2
}

/* Encouragement modal button styling */
#cph-say-word-modal .cph-encouragement-toggle {
  background: var(--cph-submit-enc-bg, var(--cph-primary));
  color: var(--cph-submit-enc-color, var(--cph-primary-contrast));
  margin-bottom: var(--cph-enc-toggle-my, 0.5rem);
}

#cph-say-word-modal .cph-encouragement-form .cph-button[type="submit"] {
  background: var(--cph-submit-bg, var(--cph-primary));
  color: var(--cph-submit-color, var(--cph-primary-contrast));
}

#cph-say-word-modal .cph-encouragement__like {
  background: var(--cph-like-bg, rgba(0, 0, 0, 0.06));
  color: var(--cph-like-color, inherit);
}

#cph-say-word-modal .cph-encouragement__title {
  font-size: var(--cph-enc-title-size, 1.25rem);
  font-weight: var(--cph-enc-title-weight, 600);
}

#cph-say-word-modal .cph-encouragement__content {
  font-size: var(--cph-enc-text-size, 1rem);
  font-weight: var(--cph-enc-text-weight, 400);
}

/* Encouragement items spacing */
#cph-say-word-modal .cph-encouragement {
  margin-bottom: var(--cph-enc-margin-bottom, 1.5rem);
  padding-bottom: var(--cph-enc-padding-bottom, 1.5rem);
  border-bottom: var(--cph-enc-border-width, 1px) solid var(--cph-enc-border-color, rgba(0, 0, 0, 0.08));
}

#cph-say-word-modal .cph-encouragement:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

#cph-say-word-modal .cph-encouragement__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  gap: 1rem;
}

#cph-say-word-modal .cph-encouragement__like {
  flex-shrink: 0;
  font-size: var(--cph-like-font-size, 0.875rem);
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--cph-like-bg, rgba(0, 0, 0, 0.06));
  color: var(--cph-like-color, inherit);
}

#cph-say-word-modal .cph-encouragement__like:hover {
  background: color-mix(in srgb, var(--cph-like-bg, rgba(0, 0, 0, 0.06)) 90%, #000 10%);
}

#cph-say-word-modal .cph-encouragement__content {
  line-height: 1.6;
  margin: 0;
}