/* =====================================================================
   CCTP GLOBAL FORM SYSTEM
   Shared by login, sign-up, submit, account and opinion forms.
   Loaded last. Form appearance only; no PHP, HTML or behavior changes.
   ===================================================================== */

:root {
  --cctp-form-panel: #656a6e;
  --cctp-form-panel-deep: #50555a;
  --cctp-form-panel-edge: #30383f;
  --cctp-form-panel-highlight: #aeb4b8;
  --cctp-form-input: #ffffff;
  --cctp-form-input-text: #111a27;
  --cctp-form-placeholder: #78828a;
  --cctp-form-label: #f7f8f9;
  --cctp-form-help: #e1e5e8;
  --cctp-form-blue: #052f81;
  --cctp-form-blue-deep: #022060;
  --cctp-form-blue-hot: #1265ad;
  --cctp-form-blue-edge: #168bca;
}

/* One restrained steel surface. Individual fields do not become panels. */
.cctp-auth-page .cctp-auth,
.cctp-submit-page .cctp-submit {
  color: var(--cctp-form-label) !important;
  border: 1px solid var(--cctp-form-panel-edge) !important;
  background-color: var(--cctp-form-panel) !important;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.018) 0 1px,
      rgba(0,0,0,.018) 1px 3px
    ),
    linear-gradient(
      90deg,
      var(--cctp-form-panel-deep) 0,
      #74797d 12%,
      #686d71 50%,
      #74797d 88%,
      var(--cctp-form-panel-deep) 100%
    ) !important;
  box-shadow:
    inset 0 2px 0 var(--cctp-form-panel-highlight),
    inset 0 -5px 7px #34393d,
    0 5px 12px rgba(8,12,15,.34) !important;
}

/* Remove the harsh nested slabs visible in the previous version. */
.cctp-auth-page .cctp-auth-form,
.cctp-auth-page .cctp-fieldset,
.cctp-auth-page .cctp-field,
.cctp-auth-page .cctp-phone-field,
.cctp-auth-page .cctp-phone-input-wrap,
.cctp-submit-page .cctp-submit__field,
.cctp-submit-page .cctp-submit__group-step,
.cctp-submit-page .cctp-submit__photo-step,
.cctp-submit-page .cctp-choice-row {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.cctp-auth-page .cctp-fieldset,
.cctp-auth-page .cctp-field,
.cctp-submit-page .cctp-submit__field,
.cctp-submit-page .cctp-submit__group-step,
.cctp-submit-page .cctp-submit__photo-step {
  border-color: #424a50 !important;
}

/* Titles and labels are text, never tabs or buttons. */
.cctp-auth-page .cctp-auth__heading h1,
.cctp-submit-page .cctp-submit > h1,
.cctp-auth-page .cctp-fieldset > legend,
.cctp-auth-page .cctp-field > span,
.cctp-submit-page .cctp-submit__field > label,
.cctp-submit-page .cctp-submit__legend,
.cctp-submit-page .cctp-submit__photo-step > label {
  color: var(--cctp-form-label) !important;
  -webkit-text-fill-color: var(--cctp-form-label) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: 0 2px 1px #171b1e !important;
}

.cctp-auth-page .cctp-auth__heading {
  border-color: #444c52 !important;
}

.cctp-auth-page .cctp-auth__heading p,
.cctp-auth-page .cctp-auth-form small,
.cctp-submit-page .cctp-submit small {
  color: var(--cctp-form-help) !important;
  -webkit-text-fill-color: var(--cctp-form-help) !important;
  text-shadow: 0 1px 1px #252a2e !important;
}

/* White writing faces with a solid dark inset edge. */
.cctp-auth-page .cctp-auth-form input:not([type="checkbox"]):not([type="radio"]),
.cctp-auth-page .cctp-auth-form select,
.cctp-auth-page .cctp-auth-form textarea,
.cctp-submit-page .cctp-submit__field input:not([type="checkbox"]):not([type="radio"]),
.cctp-submit-page .cctp-submit__photo-step select,
.cctp-account-page .cctp-member-page form:not(.cctp-reply-form) input:not([type="checkbox"]):not([type="radio"]),
.cctp-account-page .cctp-member-page form:not(.cctp-reply-form) select,
.cctp-account-page .cctp-member-page form:not(.cctp-reply-form) textarea,
.cctp-opinion-composer textarea {
  color: var(--cctp-form-input-text) !important;
  -webkit-text-fill-color: var(--cctp-form-input-text) !important;
  background: var(--cctp-form-input) !important;
  background-image: none !important;
  border: 1px solid #38434b !important;
  box-shadow:
    inset 0 2px 4px #aab2b8,
    inset 0 -1px 0 #ffffff,
    0 1px 0 rgba(255,255,255,.35) !important;
  filter: none !important;
}

.cctp-auth-page .cctp-auth-form input::placeholder,
.cctp-auth-page .cctp-auth-form textarea::placeholder,
.cctp-submit-page .cctp-submit__field input::placeholder,
.cctp-account-page .cctp-member-page form:not(.cctp-reply-form) input::placeholder,
.cctp-account-page .cctp-member-page form:not(.cctp-reply-form) textarea::placeholder,
.cctp-opinion-composer textarea::placeholder {
  color: var(--cctp-form-placeholder) !important;
  -webkit-text-fill-color: var(--cctp-form-placeholder) !important;
  opacity: 1 !important;
}

.cctp-auth-page .cctp-auth-form input:focus,
.cctp-auth-page .cctp-auth-form select:focus,
.cctp-auth-page .cctp-auth-form textarea:focus,
.cctp-submit-page .cctp-submit__field input:focus,
.cctp-submit-page .cctp-submit__photo-step select:focus,
.cctp-account-page .cctp-member-page form:not(.cctp-reply-form) input:focus,
.cctp-account-page .cctp-member-page form:not(.cctp-reply-form) select:focus,
.cctp-account-page .cctp-member-page form:not(.cctp-reply-form) textarea:focus,
.cctp-opinion-composer textarea:focus {
  border-color: var(--cctp-form-blue-edge) !important;
  outline: 2px solid rgba(22,139,202,.3) !important;
  outline-offset: 0 !important;
  box-shadow:
    inset 0 2px 4px #aab2b8,
    inset 0 -1px 0 #ffffff,
    0 0 0 2px rgba(22,139,202,.2) !important;
}

.cctp-auth-page .cctp-phone-prefix {
  color: #566675 !important;
  -webkit-text-fill-color: #566675 !important;
  text-shadow: none !important;
}

/* Form choices: clean white at rest, sapphire only when selected. */
.cctp-submit-page .cctp-choice-row button {
  color: var(--cctp-form-blue) !important;
  -webkit-text-fill-color: var(--cctp-form-blue) !important;
  border: 1px solid #d2d7dc !important;
  border-top-color: #ffffff !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  background-image: linear-gradient(180deg,#ffffff 0%,#f8f9fa 62%,#e7eaed 100%) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -2px 2px #c9ced3,
    0 3px 7px rgba(17,25,31,.28) !important;
  text-shadow: 0 1px 0 #ffffff !important;
  filter: none !important;
}

.cctp-submit-page .cctp-choice-row button.is-selected,
.cctp-submit-page .cctp-choice-row button[aria-pressed="true"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: var(--cctp-form-blue-edge) !important;
  border-top-color: #77bce3 !important;
  background-color: var(--cctp-form-blue) !important;
  background-image:
    linear-gradient(
      180deg,
      var(--cctp-form-blue-hot) 0%,
      var(--cctp-form-blue) 53%,
      var(--cctp-form-blue-deep) 100%
    ) !important;
  box-shadow:
    inset 0 2px 1px #6eb6df,
    inset 0 -4px 4px #01102f,
    0 0 0 1px #087abd,
    0 4px 7px rgba(1,16,47,.46) !important;
  text-shadow: 0 2px 1px #010b21 !important;
}

/* Primary actions share the same sapphire treatment. */
.cctp-auth-page .cctp-auth-form button.cctp-button[type="submit"],
.cctp-account-page .cctp-member-page form:not(.cctp-reply-form) button[type="submit"],
.cctp-opinion-composer button[data-submit],
.cctp-opinion-composer button[data-opinion-submit] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid var(--cctp-form-blue-edge) !important;
  border-top-color: #77bce3 !important;
  background-color: var(--cctp-form-blue) !important;
  background-image:
    linear-gradient(
      180deg,
      var(--cctp-form-blue-hot) 0%,
      var(--cctp-form-blue) 53%,
      var(--cctp-form-blue-deep) 100%
    ) !important;
  box-shadow:
    inset 0 2px 1px #6eb6df,
    inset 0 -4px 4px #01102f,
    0 4px 7px rgba(1,16,47,.46) !important;
  text-shadow: 0 2px 1px #010b21 !important;
  filter: none !important;
}

/* Login/register switch remains a secondary white action. */
.cctp-auth-page .cctp-auth__switch {
  color: var(--cctp-form-help) !important;
  border-color: #424a50 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 1px 1px #252a2e !important;
}

html body.cctp-auth-page .cctp-main .cctp-auth__switch a {
  color: var(--cctp-form-blue) !important;
  -webkit-text-fill-color: var(--cctp-form-blue) !important;
  border: 1px solid #d4d9dd !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  background-image: linear-gradient(180deg,#ffffff,#edf0f2) !important;
  box-shadow: 0 3px 7px rgba(17,25,31,.22) !important;
  text-shadow: 0 1px 0 #ffffff !important;
}

/* Never reskin the focused full-screen writing composer. */
.cctp-submit-page .cctp-submit-composer.is-mobile-sheet,
.cctp-submit-page .cctp-submit-composer.is-mobile-sheet textarea,
.cctp-submit-page .cctp-submit-composer.is-mobile-sheet .cctp-submit-composer__bottom {
  background: #ffffff !important;
  background-image: none !important;
}

/* The send action remains visible and clickable inside the white composer. */
.cctp-submit-page .cctp-submit-composer button.cctp-submit-send[data-submit] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid var(--cctp-form-blue-edge) !important;
  border-top-color: #77bce3 !important;
  background-color: var(--cctp-form-blue) !important;
  background-image: linear-gradient(180deg,var(--cctp-form-blue-hot),var(--cctp-form-blue) 53%,var(--cctp-form-blue-deep)) !important;
  box-shadow: inset 0 2px 1px #6eb6df,inset 0 -3px 3px #01102f,0 3px 6px rgba(1,16,47,.38) !important;
  text-shadow: 0 2px 1px #010b21 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.cctp-submit-page .cctp-submit-composer button.cctp-submit-send[data-submit][aria-busy="true"] {
  opacity: .55 !important;
  pointer-events: none !important;
}

@media (max-width: 430px) {
  .cctp-auth-page .cctp-auth,
  .cctp-submit-page .cctp-submit {
    box-shadow:
      inset 0 2px 0 var(--cctp-form-panel-highlight),
      inset 0 -4px 6px #34393d !important;
  }

  .cctp-submit-page .cctp-choice-row button {
    border-radius: 18px !important;
  }
}