/* ═══════════════════════════════════════════════════════════════
   SUPPORT FORM SYSTEM
   `.fav-support-form` is the shared design contract.
   Page IDs remain mount/layout hooks only.
═══════════════════════════════════════════════════════════════ */

.fav-support-form {
  width: 100%;
  max-width: 100%;
  color: var(--text);
}
/* Keep Zendesk's intermediate field state out of view while the form engine
   applies conditional visibility, notices, requirements, and draft values. */
#new-request-form {
  opacity: 1;
  transition: opacity .14s ease;
}

#new-request-form.request-form-preparing {
  opacity: 0;
  pointer-events: none;
}

.request-form-loading {
  display: none;
  width: 100%;
  padding-top: 8px;
}

#new-request-form.request-form-preparing + .request-form-loading {
  display: block;
}

.request-form-loading__content {
  display: grid;
  width: 100%;
  gap: 10px;
  animation: request-form-loading-pulse 1.4s ease-in-out infinite;
}

.request-form-loading__label,
.request-form-loading__control {
  display: block;
  background: var(--surface2);
  border: 1px solid var(--border);
}

.request-form-loading__label {
  width: min(180px, 42%);
  height: 14px;
  margin-top: 14px;
  border: 0;
  border-radius: 999px;
}

.request-form-loading__label--short {
  width: min(120px, 30%);
}

.request-form-loading__control {
  width: 100%;
  height: 48px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
}

.request-form-loading__control--large {
  height: 132px;
}

@keyframes request-form-loading-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .request-form-loading__content {
    animation: none;
    opacity: .65;
  }
}

.request-auth-gate {
  display: grid;
  justify-items: center;
  width: min(100%, 680px);
  margin: 32px auto 0;
  padding: clamp(32px, 6vw, 56px);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.request-auth-gate__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
}

.request-auth-gate__icon::before {
  content: '';
  width: 26px;
  height: 26px;
  background: currentColor;
  mask: var(--fav-icon) center / contain no-repeat;
  -webkit-mask: var(--fav-icon) center / contain no-repeat;
}

.request-auth-gate__title {
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  line-height: 1.2;
}

.request-auth-gate__description {
  width: 100%;
  max-width: 560px;
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.request-auth-gate__action {
  width: min(100%, 220px);
  min-height: 48px;
  justify-content: center;
  text-align: center;
}

.request-auth-gate__alternate {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}

.request-auth-gate__alternate:hover,
.request-auth-gate__alternate:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.new-request-page.request-error-page {
  padding-top: 32px;
  padding-bottom: 80px;
}

@media (max-width: 599px) {
  .request-auth-gate {
    margin-top: 24px;
    padding: 32px 20px;
  }
}


.fav-support-form *,
.fav-support-form *::before,
.fav-support-form *::after {
  box-sizing: border-box;
  min-width: 0;
}

.fav-support-form form {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.fav-support-form.form-disabled button[type="submit"],
.fav-support-form.form-disabled input[type="submit"] {
  opacity: .5;
  cursor: not-allowed;
}

.form-required-note {
  margin: 0 0 28px;
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* ─────────────────────────────────────────
   Shared Field Anatomy
───────────────────────────────────────── */

.fav-support-form [data-garden-id="forms.field"],
.fav-support-form.hbs-form .form-field {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--form-field-gap) !important;
}

.fav-support-form label,
.fav-support-form [data-garden-id="forms.label"] {
  display: block;
  margin: 0 0 var(--form-label-gap);
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.fav-support-form .form-required-indicator {
  color: var(--accent);
  font: inherit;
}

.fav-support-form .optional {
  margin-left: 0;
  color: var(--text-muted);
  font-weight: 400;
}

.fav-support-form [data-garden-id="typography.font"] {
  color: var(--accent) !important;
}

.fav-support-form [data-garden-id="forms.input_hint"],
.fav-support-form [data-garden-id="forms.checkbox_hint"],
.fav-support-form .content-tags-add-hint {
  display: block;
  margin: -2px 0 12px;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.fav-support-form .default-field-hidden {
  display: none !important;
}

/* ─────────────────────────────────────────
   Text Inputs
───────────────────────────────────────── */

.fav-support-form [data-garden-id="forms.input"],
.fav-support-form [class*="StyledTextInput"]:not(textarea),
.fav-support-form.hbs-form input[type="text"],
.fav-support-form.hbs-form input:not([type]) {
  width: 100% !important;
  min-height: 48px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 14px 20px !important;
  color: var(--text) !important;
  font: inherit !important;
  font-size: var(--form-control-font-size) !important;
  line-height: 1.35 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
  -webkit-appearance: none;
  appearance: none;
}

.fav-support-form [data-garden-id="forms.input"]::placeholder,
.fav-support-form [class*="StyledTextInput"]::placeholder,
.fav-support-form.hbs-form input::placeholder {
  color: var(--text-dim) !important;
}

.fav-support-form [data-garden-id="forms.input"]:hover,
.fav-support-form [class*="StyledTextInput"]:hover,
.fav-support-form.hbs-form input[type="text"]:hover,
.fav-support-form.hbs-form input:not([type]):hover {
  border-color: rgba(255, 255, 255, .14) !important;
}

.fav-support-form [data-garden-id="forms.input"]:focus,
.fav-support-form [class*="StyledTextInput"]:focus,
.fav-support-form.hbs-form input[type="text"]:focus,
.fav-support-form.hbs-form input:not([type]):focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
  outline: none !important;
}

.fav-support-form [name="request[custom_fields][48562567976859]"] {
  display: none !important;
  -webkit-text-security: disc !important;
}

.fav-support-form [data-garden-id="forms.field"]:has([name="request[custom_fields][48562567976859]"]) {
  display: none !important;
}

/* Number spinner — hide native, custom buttons added via JS */
.fav-support-form input[type="number"]::-webkit-outer-spin-button,
.fav-support-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  margin: 0 !important;
}

.fav-support-form input[type="number"] {
  -moz-appearance: textfield !important;
}

.fav-support-form .number-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.fav-support-form .number-input-wrapper input {
  padding-right: 48px !important;
}

.fav-support-form .number-spinner {
  position: absolute !important;
  right: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  padding: 4px !important;
}

.fav-support-form .number-spinner button {
  all: unset !important;
  width: 20px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s !important;
  line-height: 1 !important;
}

.fav-support-form .number-spinner button:hover {
  background: var(--accent-dim) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

.fav-support-form input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .7 !important;
  cursor: pointer !important;
  filter: invert(1) brightness(.8) !important;
}

/* ─────────────────────────────────────────
   Textareas
   CKEditor is intentionally styled in wysiwyg-bundle.js only.
───────────────────────────────────────── */

.fav-support-form [data-garden-id="forms.textarea"],
.fav-support-form [class*="StyledTextarea"],
.fav-support-form textarea[class*="StyledTextInput"],
.fav-support-form.hbs-form textarea {
  width: 100% !important;
  min-height: 220px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 18px 20px 32px !important;
  scroll-padding-bottom: 32px;
  color: var(--text) !important;
  font: inherit !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  outline: none !important;
  box-shadow: none !important;
  resize: vertical !important;
  overflow: auto;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
  -webkit-appearance: none;
  appearance: none;
}

.fav-support-form [data-garden-id="forms.textarea"] {
  height: 200px;
}

.fav-support-form textarea::-webkit-scrollbar { width: 12px; }
.fav-support-form textarea::-webkit-scrollbar-track { background: transparent; }
.fav-support-form textarea::-webkit-scrollbar-corner { background: transparent; }
.fav-support-form textarea::-webkit-resizer { background: transparent; }

.fav-support-form textarea::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius);
  background-clip: padding-box;
  border: 4px solid transparent;
  border-top-width: 24px;
  border-bottom-width: 24px;
}

.fav-support-form textarea::placeholder {
  color: var(--text-dim) !important;
}

.fav-support-form textarea:hover,
.fav-support-form [data-garden-id="forms.textarea"]:hover,
.fav-support-form [class*="StyledTextarea"]:hover {
  border-color: rgba(255, 255, 255, .14) !important;
}

.fav-support-form textarea:focus,
.fav-support-form [data-garden-id="forms.textarea"]:focus,
.fav-support-form [class*="StyledTextarea"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
  outline: none !important;
}

/* ─────────────────────────────────────────
   Garden Dropdowns / Comboboxes
───────────────────────────────────────── */

[data-garden-id="dropdowns.combobox.container"],
[data-garden-id="dropdowns.combobox.field"] {
  width: 100% !important;
}

.fav-support-form [data-garden-id="dropdowns.combobox.trigger"] {
  width: 100% !important;
  min-height: var(--form-control-height) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  outline: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 8px 52px 8px var(--form-control-padding-inline) !important;
  text-align: left !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, system-ui, "Helvetica Neue", Arial, sans-serif !important;
  font-size: var(--form-control-font-size) !important;
  font-weight: 400 !important;
}

.fav-support-form [data-garden-id="dropdowns.combobox.trigger"] > * {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.fav-support-form [data-garden-id="dropdowns.combobox.trigger"]:hover {
  border-color: rgba(255, 255, 255, .14) !important;
}

.fav-support-form [data-garden-id="dropdowns.combobox.trigger"]:focus-within,
.fav-support-form [data-garden-id="dropdowns.combobox.trigger"][aria-expanded="true"] {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
}

.fav-support-form [data-garden-id="dropdowns.combobox.input_group"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  min-height: 24px !important;
}

.fav-support-form [data-garden-id="dropdowns.combobox.value"],
.fav-support-form [data-garden-id="dropdowns.combobox.input"] {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

.fav-support-form [data-garden-id="dropdowns.combobox.input_icon"] {
  position: absolute !important;
  right: var(--form-chevron-offset) !important;
  left: auto !important;
  top: 50% !important;
  width: var(--form-chevron-size) !important;
  height: var(--form-chevron-size) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  transition: transform .2s ease, color .2s ease !important;
}

.fav-support-form [data-garden-id="dropdowns.combobox.input_icon"] svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.fav-support-form [data-garden-id="dropdowns.combobox.trigger"][aria-expanded="true"] [data-garden-id="dropdowns.combobox.input_icon"] {
  color: var(--accent) !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

.fav-support-form [data-garden-id="tags.tag_view"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px !important;
  border-radius: 100px !important;
  border: 1px solid var(--accent-border) !important;
  background: var(--accent-dim) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Portalled Garden listboxes are marked by fav-support.js when they belong to forms. */
.fav-form-listbox,
body .fav-form-listbox,
.fav-content-tags-listbox,
body .fav-content-tags-listbox {
  position: fixed !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--dropdown-panel-radius) !important;
  box-shadow: var(--dropdown-panel-shadow) !important;
  padding: var(--dropdown-panel-padding) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: min(360px, 50vh) !important;
  color: var(--text) !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.fav-content-tags-menu-wrapper,
body .fav-content-tags-menu-wrapper {
  position: fixed !important;
  display: block !important;
  background: transparent !important;
  transform: none !important;
  z-index: 10000 !important;
}

.fav-content-tags-menu-wrapper > [data-garden-id="dropdowns.menu"],
body .fav-content-tags-menu-wrapper > [data-garden-id="dropdowns.menu"] {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

.fav-form-listbox [role="option"],
body .fav-form-listbox [role="option"],
.fav-content-tags-listbox [role="option"],
body .fav-content-tags-listbox [role="option"] {
  min-height: 44px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, system-ui, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  border-radius: var(--radius-xs) !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.fav-form-listbox [role="option"] *,
body .fav-form-listbox [role="option"] *,
.fav-content-tags-listbox [role="option"] *,
body .fav-content-tags-listbox [role="option"] * {
  text-align: left !important;
}

.fav-content-tags-listbox [data-garden-id="dropdowns.item"],
body .fav-content-tags-listbox [data-garden-id="dropdowns.item"] {
  min-height: 44px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, system-ui, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  border: 0 !important;
  border-radius: var(--radius-xs) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.fav-form-listbox [role="option"] svg,
body .fav-form-listbox [role="option"] svg,
.fav-content-tags-listbox [role="option"] svg,
body .fav-content-tags-listbox [role="option"] svg {
  display: none !important;
}

.fav-form-listbox [role="option"]:hover,
.fav-form-listbox [role="option"][aria-selected="true"],
body .fav-form-listbox [role="option"]:hover,
body .fav-form-listbox [role="option"][aria-selected="true"],
.fav-content-tags-listbox [role="option"]:hover,
.fav-content-tags-listbox [role="option"][aria-selected="true"],
body .fav-content-tags-listbox [role="option"]:hover,
body .fav-content-tags-listbox [role="option"][aria-selected="true"] {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

.fav-content-tags-listbox [data-garden-id="dropdowns.item"]:hover,
.fav-content-tags-listbox [data-garden-id="dropdowns.item"][aria-selected="true"],
body .fav-content-tags-listbox [data-garden-id="dropdowns.item"]:hover,
body .fav-content-tags-listbox [data-garden-id="dropdowns.item"][aria-selected="true"] {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

/* ─────────────────────────────────────────
   HBS Native Select Adapter
───────────────────────────────────────── */

.ck.ck-toolbar .ck.ck-dropdown__panel .ck.ck-list .ck.ck-list__item > .ck.ck-button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, system-ui, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  text-align: left !important;
}

.ck.ck-toolbar .ck.ck-dropdown__panel .ck.ck-list .ck.ck-list__item > .ck.ck-button .ck-button__label,
.ck.ck-toolbar .ck.ck-dropdown__panel .ck.ck-list .ck.ck-list__item .ck.ck-list-item-button__title {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ck.ck-toolbar .ck.ck-code-block-dropdown > .ck.ck-splitbutton.ck-dropdown__button {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--fav-ck-border, var(--border)) !important;
  border-radius: 999px !important;
  background: var(--fav-ck-bg, var(--surface)) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.ck.ck-toolbar .ck.ck-code-block-dropdown > .ck.ck-splitbutton.ck-dropdown__button > .ck.ck-splitbutton__action {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ck.ck-toolbar .ck.ck-code-block-dropdown > .ck.ck-splitbutton.ck-dropdown__button > .ck.ck-splitbutton__arrow {
  display: none !important;
}

.ck.ck-toolbar .ck.ck-code-block-dropdown > .ck.ck-dropdown__panel {
  display: none !important;
}

.ck.ck-toolbar .ck.ck-code-block-dropdown.ck-open > .ck.ck-splitbutton.ck-dropdown__button,
.ck.ck-toolbar .ck.ck-code-block-dropdown > .ck.ck-splitbutton.ck-dropdown__button:focus-within {
  border-color: var(--fav-ck-accent, var(--accent)) !important;
  box-shadow: 0 0 0 3px var(--fav-ck-accent-soft, var(--accent-dim)) !important;
}

.ck.ck-toolbar .ck.ck-code-block-dropdown.ck-open > .ck.ck-splitbutton.ck-dropdown__button > .ck.ck-button,
.ck.ck-toolbar .ck.ck-code-block-dropdown > .ck.ck-splitbutton.ck-dropdown__button > .ck.ck-button:focus,
.ck.ck-toolbar .ck.ck-code-block-dropdown > .ck.ck-splitbutton.ck-dropdown__button > .ck.ck-button.ck-on {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ck-body-wrapper .ck.ck-balloon-panel .ck.ck-link-form {
  min-width: 340px !important;
  padding: 18px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--fav-ck-text, var(--text)) !important;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, system-ui, "Helvetica Neue", Arial, sans-serif !important;
}

.ck-body-wrapper .ck.ck-link-form .ck.ck-form__header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--fav-ck-border, var(--border)) !important;
}

.ck-body-wrapper .ck.ck-link-form .ck.ck-form__header__label {
  margin: 0 !important;
  color: var(--fav-ck-text, var(--text)) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.ck-body-wrapper .ck.ck-link-form .ck.ck-form__row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}

.ck-body-wrapper .ck.ck-link-form .ck.ck-labeled-field-view {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.ck-body-wrapper .ck.ck-link-form .ck.ck-labeled-field-view__input-wrapper {
  position: relative !important;
  background: transparent !important;
}

.ck-body-wrapper .ck.ck-link-form .ck.ck-input {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--fav-ck-border, var(--border)) !important;
  border-radius: 12px !important;
  background: var(--fav-ck-bg-2, var(--surface2)) !important;
  box-shadow: none !important;
  color: var(--fav-ck-text, var(--text)) !important;
  font-family: inherit !important;
  font-size: 14px !important;
}

.ck-body-wrapper .ck.ck-link-form .ck.ck-input:focus {
  border-color: var(--fav-ck-accent, var(--accent)) !important;
  box-shadow: 0 0 0 3px var(--fav-ck-accent-soft, var(--accent-dim)) !important;
}

.ck-body-wrapper .ck.ck-link-form .ck.ck-label {
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  z-index: 1 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--fav-ck-dim, var(--text-dim)) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
  transform-origin: left center !important;
  transition: opacity .15s ease !important;
}

.ck-body-wrapper .ck.ck-link-form .ck.ck-labeled-field-view_focused .ck.ck-label,
.ck-body-wrapper .ck.ck-link-form .ck.ck-labeled-field-view:not(.ck-labeled-field-view_empty) .ck.ck-label {
  opacity: 0 !important;
  visibility: hidden !important;
}

.ck-body-wrapper form.ck.ck-form.ck-link-form button.ck.ck-button.ck-button-action.ck-button_with-text {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 88px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid var(--fav-ck-accent, var(--accent)) !important;
  border-radius: 999px !important;
  background: var(--fav-ck-accent, var(--accent)) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.ck-body-wrapper form.ck.ck-form.ck-link-form button.ck.ck-button.ck-button-action.ck-button_with-text > .ck.ck-button__label {
  display: block !important;
  width: auto !important;
  color: inherit !important;
  font: inherit !important;
}

.ck.ck-editor__editable_inline.ck-content > ol,
.ck.ck-editor__editable_inline.ck-content > ul,
.ck.ck-editor__editable_inline.ck-content li > ol,
.ck.ck-editor__editable_inline.ck-content li > ul {
  margin: 12px 0 !important;
  padding-left: 30px !important;
}

.ck.ck-editor__editable_inline.ck-content ol {
  list-style-position: outside !important;
  list-style-type: decimal !important;
}

.ck.ck-editor__editable_inline.ck-content ul {
  list-style-position: outside !important;
  list-style-type: disc !important;
}

.ck.ck-editor__editable_inline.ck-content li {
  margin: 5px 0 !important;
  padding-left: 4px !important;
  line-height: 1.55 !important;
}

.ck.ck-editor__editable_inline.ck-content h1,
.ck.ck-editor__editable_inline.ck-content h2,
.ck.ck-editor__editable_inline.ck-content h3 {
  margin: 22px 0 10px !important;
  line-height: 1.25 !important;
}

.ck.ck-editor__editable_inline.ck-content h1:first-child,
.ck.ck-editor__editable_inline.ck-content h2:first-child,
.ck.ck-editor__editable_inline.ck-content h3:first-child {
  margin-top: 0 !important;
}

.ck.ck-editor__editable_inline.ck-content h1 {
  font-size: 28px !important;
}

.ck.ck-editor__editable_inline.ck-content h2 {
  font-size: 22px !important;
}

.ck.ck-editor__editable_inline.ck-content h3 {
  font-size: 18px !important;
}

.ck.ck-editor__editable_inline.ck-content > pre {
  margin: 16px 0 !important;
}

.ck.ck-editor__editable_inline.ck-content p {
  margin: 0 !important;
  line-height: 1.5 !important;
}

.fav-support-form.hbs-form select {
  width: 100%;
  min-height: var(--form-control-height);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 54px 14px var(--form-control-padding-inline);
  color: var(--text);
  font: inherit;
  font-size: var(--form-control-font-size);
  font-weight: 400;
  line-height: 1.35;
  outline: none;
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none;
  appearance: none;
}

.fav-support-form.hbs-form .fav-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.fav-support-form.hbs-form .fav-select {
  position: relative;
  width: 100%;
}

.fav-support-form.hbs-form .fav-select-trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--form-control-height);
  padding: 14px 54px 14px var(--form-control-padding-inline);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: var(--form-control-font-size);
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.fav-support-form.hbs-form .fav-select-trigger:hover {
  border-color: rgba(255, 255, 255, .14);
}

.fav-support-form.hbs-form .fav-select.is-open .fav-select-trigger,
.fav-support-form.hbs-form .fav-select-trigger:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}

.fav-support-form.hbs-form .fav-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fav-support-form.hbs-form .fav-select-value.is-placeholder {
  color: var(--accent);
}

.fav-support-form.hbs-form .fav-select-chevron {
  position: absolute;
  right: var(--form-chevron-offset);
  top: 50%;
  width: var(--form-chevron-size);
  height: var(--form-chevron-size);
  color: var(--text-muted);
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform .2s ease, color .2s ease;
}

.fav-support-form.hbs-form .fav-select.is-open .fav-select-chevron {
  color: var(--accent);
  transform: translateY(-50%) rotate(180deg);
}

.fav-support-form.hbs-form .fav-select-list {
  position: absolute;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 80;
  top: calc(100% + var(--dropdown-gap));
  left: 0;
  right: 0;
  max-height: min(360px, 50vh);
  overflow: auto;
  padding: var(--dropdown-panel-padding);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--dropdown-panel-radius);
  color: var(--text);
  box-shadow: var(--dropdown-panel-shadow);
}

.fav-support-form.hbs-form .fav-select-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--dropdown-option-height);
  padding: var(--dropdown-option-padding);
  border: 0;
  border-radius: var(--dropdown-option-radius);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--dropdown-option-font-size);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.fav-support-form.hbs-form .fav-select-option:hover,
.fav-support-form.hbs-form .fav-select-option[aria-selected="true"] {
  background: var(--surface2);
  color: var(--text);
}

.fav-support-form.hbs-form .fav-select-option.is-placeholder,
.fav-support-form.hbs-form .fav-select-option.is-placeholder:hover,
.fav-support-form.hbs-form .fav-select-option.is-placeholder[aria-selected="true"] {
  color: var(--accent);
}

/* ─────────────────────────────────────────
   HBS Content Tags
───────────────────────────────────────── */

.fav-support-form.hbs-form .content-tags-field label {
  margin-bottom: 6px;
}

.fav-support-form.hbs-form [id^="multi-select-"] {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}

.fav-support-form.hbs-form [id^="multi-select-"] > div,
.fav-support-form.hbs-form [data-test-id="zd-content-tags-select"] {
  width: 100%;
}

.fav-support-form.hbs-form [id^="multi-select-"] [data-garden-id="dropdowns.combobox.container"],
.fav-support-form.hbs-form [id^="multi-select-"] [data-garden-id="dropdowns.combobox.field"] {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.fav-support-form.hbs-form [id^="multi-select-"] [data-garden-id="dropdowns.combobox.trigger"],
.fav-support-form.hbs-form [data-test-id="zd-content-tags-select"] [data-garden-id="dropdowns.combobox.trigger"],
.fav-support-form.hbs-form [data-test-id="zd-content-tags-select"]:not(:has([data-garden-id="dropdowns.combobox.trigger"], [role="combobox"])) {
  width: 100%;
  min-height: 56px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  outline: none !important;
}

.fav-support-form.hbs-form [id^="multi-select-"] [data-garden-id="dropdowns.combobox.trigger"] {
  min-height: 56px !important;
  padding: 8px 52px 8px 20px !important;
}

.fav-support-form.hbs-form [id^="multi-select-"] [data-test-id="zd-content-tags-select"] *,
.fav-support-form.hbs-form [id^="multi-select-"] [data-garden-id^="dropdowns.combobox"] * {
  background-color: transparent !important;
  box-shadow: none !important;
}

.fav-support-form.hbs-form [id^="multi-select-"] input,
.fav-support-form.hbs-form [id^="multi-select-"] [role="combobox"],
.fav-support-form.hbs-form [id^="multi-select-"] [data-garden-id="dropdowns.combobox.input"],
.fav-support-form.hbs-form [id^="multi-select-"] [data-garden-id="dropdowns.combobox.value"] {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text) !important;
  box-shadow: none !important;
  outline: none !important;
}

.fav-support-form.hbs-form [id^="multi-select-"] [data-garden-id="dropdowns.combobox.trigger"]:hover,
.fav-support-form.hbs-form [data-test-id="zd-content-tags-select"]:not(:has([data-garden-id="dropdowns.combobox.trigger"], [role="combobox"])):hover {
  border-color: rgba(255, 255, 255, .14) !important;
}

.fav-support-form.hbs-form [id^="multi-select-"] [data-garden-id="dropdowns.combobox.trigger"]:focus-within,
.fav-support-form.hbs-form [id^="multi-select-"] [data-garden-id="dropdowns.combobox.trigger"][aria-expanded="true"],
.fav-support-form.hbs-form [data-test-id="zd-content-tags-select"]:not(:has([data-garden-id="dropdowns.combobox.trigger"], [role="combobox"])):focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
}

.fav-support-form.hbs-form .content-tags-field [data-test-id="zd-content-tags-select"],
.fav-support-form.hbs-form .content-tags-field [data-garden-id="dropdowns.combobox.container"],
.fav-support-form.hbs-form .content-tags-field [data-garden-id="dropdowns.combobox.field"] {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.fav-support-form.hbs-form .content-tags-field [data-garden-id="dropdowns.combobox.trigger"],
.fav-support-form.hbs-form .content-tags-field [role="combobox"] {
  width: 100% !important;
  min-height: 56px !important;
  padding: 8px 52px 8px 20px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  outline: none !important;
}

.fav-support-form.hbs-form .content-tags-field [data-garden-id="dropdowns.combobox.input_group"] {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
  background: transparent !important;
}

.fav-support-form.hbs-form .content-tags-field input,
.fav-support-form.hbs-form .content-tags-field [data-garden-id="dropdowns.combobox.input"],
.fav-support-form.hbs-form .content-tags-field [data-garden-id="dropdowns.combobox.value"] {
  flex: 1 1 120px !important;
  width: auto !important;
  min-width: 120px !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--text) !important;
  box-shadow: none !important;
  outline: none !important;
}

.fav-support-form.hbs-form .content-tags-field [data-garden-id="dropdowns.combobox.trigger"]:hover {
  border-color: rgba(255, 255, 255, .14) !important;
}

.fav-support-form.hbs-form .content-tags-field [data-garden-id="dropdowns.combobox.trigger"]:focus-within,
.fav-support-form.hbs-form .content-tags-field [data-garden-id="dropdowns.combobox.trigger"][aria-expanded="true"] {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
}

/* ─────────────────────────────────────────
   Notices / Validation / Submit
───────────────────────────────────────── */

.fav-support-form .req-form-notice {
  background: linear-gradient(135deg, rgba(255,68,88,.08), rgba(155,93,229,.05)) !important;
  border: 1px solid rgba(255,68,88,.25) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 18px !important;
  margin: 4px 0 !important;
}

.fav-support-form .req-form-notice-title {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.fav-support-form .req-form-notice-body {
  font-size: 13px !important;
  color: var(--text) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.fav-support-form .req-form-notice-body a {
  color: var(--accent) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.fav-support-form .req-form-notice-body a:hover {
  opacity: .8 !important;
}


.fav-support-form [aria-invalid="true"] {
  border-color: #ff5c7a !important;
  box-shadow: 0 0 0 4px rgba(255, 92, 122, .14) !important;
}

.fav-support-form [role="alert"],
.fav-support-form .error,
.fav-support-form .field-error,
.fav-support-form .notification-error,
.fav-support-form .notification-inline {
  color: #ff5c7a !important;
}

.fav-support-form footer {
  margin-top: var(--form-submit-gap);
}

.fav-support-form button[type="submit"],
.fav-support-form input[type="submit"] {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 14px 22px !important;
  background: linear-gradient(180deg, #ff5f7d, #ff4968) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 24px rgba(255, 79, 109, .24) !important;
  cursor: pointer !important;
  transition: transform .2s, box-shadow .2s !important;
  -webkit-appearance: none;
  appearance: none;
}

.fav-support-form button[type="submit"]:hover,
.fav-support-form input[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(255, 79, 109, .32) !important;
}

.fav-support-form button[type="submit"]:focus,
.fav-support-form input[type="submit"]:focus {
  outline: none !important;
  box-shadow: 0 14px 28px rgba(255, 79, 109, .32), 0 0 0 4px var(--accent-dim) !important;
}

.fav-support-form button[type="submit"]:disabled,
.fav-support-form input[type="submit"]:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────
   Date Picker
───────────────────────────────────────── */

.fav-support-form [data-garden-id="datepickers.menu_wrapper"] > *,
.fav-support-form .StyledMenuWrapper-sc-6fowoz-0 > * {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .42) !important;
  overflow: hidden !important;
  color: var(--text) !important;
}

.fav-support-form [data-garden-id="datepickers.header"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, .03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.fav-support-form [data-garden-id="datepickers.header_label"],
.fav-support-form [data-garden-id="datepickers.header_pad"] {
  color: var(--accent) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.fav-support-form [data-garden-id="datepickers.header_paddle"],
.fav-support-form [data-garden-id="datepickers.previous"],
.fav-support-form [data-garden-id="datepickers.next"] {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid var(--accent-border) !important;
  background: var(--surface) !important;
  color: var(--accent) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
}

.fav-support-form [data-garden-id="datepickers.header_paddle"]:hover,
.fav-support-form [data-garden-id="datepickers.previous"]:hover,
.fav-support-form [data-garden-id="datepickers.next"]:hover {
  border-color: var(--accent) !important;
  background: var(--accent-dim) !important;
}

.fav-support-form [data-garden-id="datepickers.datepicker"] {
  padding: 10px 12px 14px !important;
  background: transparent !important;
}

.fav-support-form [data-garden-id="datepickers.day_label"] {
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  text-align: center !important;
}

.fav-support-form [data-garden-id="datepickers.day"] {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text) !important;
  font-size: 13px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
}

.fav-support-form [data-garden-id="datepickers.day"]:hover {
  background: var(--accent-dim) !important;
}

.fav-support-form [data-garden-id="datepickers.day"][data-selected="true"],
.fav-support-form [data-garden-id="datepickers.day"][aria-selected="true"] {
  background: var(--accent) !important;
  color: #fff !important;
}

.fav-support-form [data-garden-id="datepickers.day"][data-today="true"] {
  font-weight: 700 !important;
  color: var(--accent) !important;
  box-shadow: inset 0 -2px 0 var(--accent) !important;
}

.fav-support-form [data-garden-id="datepickers.day"][data-outside="true"],
.fav-support-form [data-garden-id="datepickers.day"][data-muted="true"] {
  opacity: .35 !important;
}

.fav-support-form [data-garden-id="datepickers.day"][disabled] {
  opacity: .25 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ─────────────────────────────────────────
   Community Post Layout Adapter
───────────────────────────────────────── */

.new-community-post-page {
  padding-top: 32px;
  padding-bottom: 80px;
}

.new-community-post-page #main-content {
  width: 100%;
  max-width: 100%;
  margin-top: 24px;
}

.fav-support-form .suggestion-list {
  margin: -8px 0 20px;
}

@media (max-width: 767px) {
  .new-community-post-page {
    padding-top: 24px;
    padding-bottom: 56px;
  }

}