/* ==========================================================================
   KeyShot HubSpot form styles
   Import into the main theme style.css.

   Usage: on the Divi code module holding the HubSpot embed, set the module
   CSS class to `light-form` or `dark-form`. The class sets the token block;
   all structural rules below apply to both. `dark-form` works on any dark
   section background (navy #0A2540, brand blue #0050E6); the section sets
   its own background, not this file.

   Inputs stay white in both themes, so input internals (text, placeholder,
   error border) have their own tokens, separate from the copy that sits
   directly on the section background (labels, help text, legal, errors).

   Colors per SHARED/START/keyshot-brand.md. !important is kept only where
   HubSpot's injected styles need overriding.
   ========================================================================== */

.light-form {
  --ksf-text:              #0A2540;  /* labels */
  --ksf-muted:             #65748D;  /* help text, legal copy */
  --ksf-link:              #65748D;  /* legal links */
  --ksf-input-bg:          #FFFFFF;
  --ksf-input-text:        #0A2540;
  --ksf-input-placeholder: #65748D;
  --ksf-input-border:      #65748D;
  --ksf-focus:             #0050E6;
  --ksf-selected:          #0050E6;  /* checked checkbox/radio */
  --ksf-check-color:       #FFFFFF;  /* checkmark inside checkbox */
  --ksf-btn-bg:            #0050E6;
  --ksf-btn-bg-hover:      #0047CC;  /* ~10% darker blue */
  --ksf-btn-text:          #F6F9FC;
  --ksf-error-text:        #CC0000;  /* error messages on section bg */
  --ksf-error-border:      #CC0000;  /* error border on white input */
  --ksf-surface:           #FFFFFF;  /* submitted-message panel */
  --ksf-surface-text:      #0A2540;
  --ksf-hover-tint:        rgba(0, 0, 0, 0.1); /* checkbox hover */
}

.dark-form {
  --ksf-text:              #F6F9FC;
  --ksf-muted:             #D7E0EC;  /* readable on navy and brand blue */
  --ksf-link:              #FFFFFF;
  --ksf-input-bg:          #FFFFFF;
  --ksf-input-text:        #0A2540;
  --ksf-input-placeholder: #65748D;
  --ksf-input-border:      #65748D;
  --ksf-focus:             #0050E6;
  --ksf-selected:          #FCC10F;  /* yellow: visible on navy and blue alike */
  --ksf-check-color:       #0A2540;
  --ksf-btn-bg:            #FFFFFF;
  --ksf-btn-bg-hover:      #DCE5F0;
  --ksf-btn-text:          #0A2540;
  /* Yellow accent button option — swap the 3 lines above for:
     --ksf-btn-bg:       #FCC10F;
     --ksf-btn-bg-hover: #E8B10D;  ~8% darker yellow
     --ksf-btn-text:     #0A2540;                                    */
  --ksf-error-text:        #FFCDCD;  /* light red, readable on dark bg */
  --ksf-error-border:      #CC0000;  /* stays dark: sits on white input */
  --ksf-surface:           #FFFFFF;
  --ksf-surface-text:      #0A2540;
  --ksf-hover-tint:        rgba(0, 0, 0, 0.1); /* checkbox is white in both themes */
}

/* Labels / help text ------------------------------------------------------- */

:is(.light-form, .dark-form) .hs-form label {
  color: var(--ksf-text);
  font-size: 14px;
  font-weight: 500;
}

:is(.light-form, .dark-form) .hs-form .hs-field-desc {
  color: var(--ksf-muted);
  font-size: 14px;
  line-height: 1.4;
}

/* Fields / layout --------------------------------------------------------- */

:is(.light-form, .dark-form) .hs-form .field {
  padding-bottom: 12px !important;
}

:is(.light-form, .dark-form) .hs-form fieldset.form-columns-3 .hs-form-field {
  width: 33.33% !important;
}

:is(.light-form, .dark-form) .hs-form input:not([type="image"]),
:is(.light-form, .dark-form) .hs-form textarea {
  box-sizing: border-box;
}

:is(.light-form, .dark-form) .hs-form ul.inputs-list {
  padding: 0;
  list-style-type: none;
}

/* Text inputs, textarea, select ------------------------------------------- */

:is(.light-form, .dark-form) .hs-form .hs-input[type="text"],
:is(.light-form, .dark-form) .hs-form .hs-input[type="email"],
:is(.light-form, .dark-form) .hs-form .hs-input[type="tel"],
:is(.light-form, .dark-form) .hs-form .hs-input[type="number"],
:is(.light-form, .dark-form) .hs-form textarea.hs-input,
:is(.light-form, .dark-form) .hs-form select.hs-input {
  display: block;
  width: 100% !important;
  height: 40px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ksf-input-text) !important;
  background-color: var(--ksf-input-bg) !important;
  background-image: none;
  border: 1px solid var(--ksf-input-border) !important;
  border-radius: 4px !important;
  box-shadow: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

:is(.light-form, .dark-form) .hs-form textarea.hs-input {
  height: 100px;
}

:is(.light-form, .dark-form) .hs-form .hs-input:focus {
  outline: none;
  border-color: var(--ksf-focus) !important;
  box-shadow: 0 0 0 1px var(--ksf-focus); /* reads as the brand 2px focus ring without layout shift */
}

:is(.light-form, .dark-form) .hs-form .hs-input::placeholder {
  color: var(--ksf-input-placeholder) !important;
  opacity: 1;
  font-weight: 400;
}

/* Radios (current KeyShot user field) ------------------------------------- */

:is(.light-form, .dark-form) .hs-form .hs-form-radio {
  display: inline-block;
  padding: 10px;
}

:is(.light-form, .dark-form) .hs-form .hs_current_keyshot_user {
  font-size: 14px;
  font-weight: 400;
}

:is(.light-form, .dark-form) .hs-form .hs_current_keyshot_user label,
:is(.light-form, .dark-form) .hs-form .hs_current_keyshot_user .input {
  display: inline-block;
}

:is(.light-form, .dark-form) .hs-form .hs_current_keyshot_user input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px !important;
  height: 20px !important;
  margin-right: 5px;
  position: relative;
  top: 2px;
  border: 2px solid var(--ksf-input-border);
  border-radius: 50%;
  background-color: var(--ksf-input-bg);
  transition: 0.1s all linear;
}

:is(.light-form, .dark-form) .hs-form .hs_current_keyshot_user input:checked {
  border: 6px solid var(--ksf-selected);
}

/* Checkboxes --------------------------------------------------------------- */

:is(.light-form, .dark-form) .hs-form input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.2em !important;
  height: 1.2em !important;
  margin: 5px 0;
  position: relative;
  cursor: pointer;
  background-color: var(--ksf-input-bg);
  border: 1px solid var(--ksf-input-border);
  border-radius: 4px;
  transition: 0.15s;
}

:is(.light-form, .dark-form) .hs-form input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 1.1em;
  text-align: center;
  color: var(--ksf-check-color);
}

:is(.light-form, .dark-form) .hs-form input[type="checkbox"]:checked {
  background-color: var(--ksf-selected);
  border-color: var(--ksf-selected);
}

:is(.light-form, .dark-form) .hs-form input[type="checkbox"]:checked::before {
  content: '\2714';
}

:is(.light-form, .dark-form) .hs-form input[type="checkbox"]:hover:not(:checked)::before {
  background: var(--ksf-hover-tint);
}

/* Errors ------------------------------------------------------------------- */

:is(.light-form, .dark-form) .hs-form ul.hs-error-msgs,
:is(.light-form, .dark-form) .hs-form ul.hs-error-msgs a {
  padding: 0;
  line-height: 1.4;
  list-style: none;
}

:is(.light-form, .dark-form) .hs-form ul.hs-error-msgs li {
  list-style: none;
}

:is(.light-form, .dark-form) .hs-form ul.hs-error-msgs li label {
  font-size: 12px;
  color: var(--ksf-error-text) !important;
}

:is(.light-form, .dark-form) .hs-form .hs-input.error {
  border-color: var(--ksf-error-border) !important;
  box-shadow: 0 0 3px rgba(204, 0, 0, 0.25);
}

/* Legal consent / recaptcha ------------------------------------------------ */

:is(.light-form, .dark-form) .hs-form .legal-consent-container {
  font-size: 12px;
  line-height: 1.4;
  padding-bottom: 1em;
  color: var(--ksf-muted);
}

:is(.light-form, .dark-form) .hs-form .legal-consent-container a {
  color: var(--ksf-link);
  text-decoration: underline;
}

:is(.light-form, .dark-form) .hs-form .legal-consent-container ul.hs-error-msgs {
  padding: 0;
  line-height: 1em;
}

:is(.light-form, .dark-form) .hs-form .hs_recaptcha {
  padding-bottom: 20px;
}

/* Submit ------------------------------------------------------------------- */

:is(.light-form, .dark-form) .hs-form .hs-submit {
  text-align: left !important;
}

:is(.light-form, .dark-form) .hs-form .hs-button {
  display: inline-block;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-transform: none;
  padding: 10px 28px;
  margin: 0;
  border: 0 !important;
  border-radius: 6px;
  background-color: var(--ksf-btn-bg) !important;
  background-image: none;
  box-shadow: none;
  color: var(--ksf-btn-text) !important;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

:is(.light-form, .dark-form) .hs-form .hs-button:hover,
:is(.light-form, .dark-form) .hs-form .hs-button:focus {
  background-color: var(--ksf-btn-bg-hover) !important;
}

/* Submitted message -------------------------------------------------------- */

:is(.light-form, .dark-form) .submitted-message {
  background-color: var(--ksf-surface);
  color: var(--ksf-surface-text);
  padding: 32px;
  border-radius: 8px;
}