/* =============================================================================
   Contact / Support Request — webform-submission-devportal-contact-us-form
   Scoped to the form class so styling works on any page the form is placed.
   ============================================================================= */

/* Centre the form block */
.block-webform:has(.webform-submission-devportal-contact-us-form),
.webform-submission-devportal-contact-us-form {
  max-width: 680px;
  margin-inline: auto;
}

/* Outer form stack */
.webform-submission-devportal-contact-us-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);
  padding: var(--space-8, 2rem) 0;
}

/* Hide "Indicates required field" note */
.webform-submission-devportal-contact-us-form .webform-required {
  display: none;
}

/* Title & description from webform_markup */
.webform-submission-devportal-contact-us-form .dcp-form-title {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  color: var(--color-text-primary, #0f172a);
  margin: 0 0 var(--space-1, 0.25rem);
}

.webform-submission-devportal-contact-us-form .dcp-form-description {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #64748b);
  margin: 0;
}

/* Name + Email side-by-side row */
.webform-submission-devportal-contact-us-form .webform-flexbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4, 1rem);
}

@media (max-width: 600px) {
  .webform-submission-devportal-contact-us-form .webform-flexbox {
    grid-template-columns: 1fr;
  }
}

/* Labels */
.webform-submission-devportal-contact-us-form .form-item > label {
  display: block;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--color-text-primary, #0f172a);
  margin-bottom: var(--space-2, 0.5rem);
}

.webform-submission-devportal-contact-us-form .form-required::after {
  /* Classic-theme templates ship no marker content; Claro's is overridden
     by this same rule, so both themes render the same red asterisk. */
  content: '*';
  margin-inline-start: 0.15em;
  color: var(--color-danger, #ef4444);
}

/* All field inputs */
.webform-submission-devportal-contact-us-form input[type="text"],
.webform-submission-devportal-contact-us-form input[type="email"],
.webform-submission-devportal-contact-us-form select,
.webform-submission-devportal-contact-us-form textarea,
.webform-submission-devportal-contact-us-form .form-textarea-wrapper textarea {
  display: block;
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
  font-family: inherit;
  color: var(--color-text-primary, #0f172a);
  background-color: var(--color-neutral-50, #f3f3f5);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 0.5rem);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.webform-submission-devportal-contact-us-form input[type="text"]:focus,
.webform-submission-devportal-contact-us-form input[type="email"]:focus,
.webform-submission-devportal-contact-us-form select:focus,
.webform-submission-devportal-contact-us-form textarea:focus {
  border-color: var(--color-primary, #2272c1);
  box-shadow: 0 0 0 3px rgba(34, 114, 193, 0.1);
  background-color: #ffffff;
}

/* Select chevron */
.webform-submission-devportal-contact-us-form select {
  background-image: url('../images/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: 98% center;
  background-size: 1.3rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

.ui-dialog .webform-submission-devportal-contact-us-form select.form-element {
  background-color: var(--color-neutral-50, #f3f3f5);
  border: 1px solid var(--color-border, #e2e8f0);
  height: 50px;
}

.webform-submission-devportal-contact-us-form select:focus {
  background-image: url('../images/chevron-down.svg');
}

/* Textarea */
.webform-submission-devportal-contact-us-form textarea {
  resize: vertical;
  min-height: 160px;
}

/* Remove extra div wrapper around textarea */
.webform-submission-devportal-contact-us-form .form-type-textarea > div {
  margin: 0;
}

/* Submit button — full width, dark navy */
.webform-submission-devportal-contact-us-form .form-actions,
.webform-submission-devportal-contact-us-form .webform-actions {
  margin-top: var(--space-2, 0.5rem);
}

.webform-submission-devportal-contact-us-form input[type="submit"].webform-button--submit,
.webform-submission-devportal-contact-us-form input[type="submit"].button--primary {
  display: block;
  width: 100%;
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  font-family: inherit;
  color: #ffffff;
  background-color: var(--color-primary-dark, #1e3a5f);
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  text-align: center;
  -webkit-appearance: none;
}

.webform-submission-devportal-contact-us-form input[type="submit"].webform-button--submit:hover,
.webform-submission-devportal-contact-us-form input[type="submit"].button--primary:hover {
  background-color: var(--color-primary, #2272c1);
}

.webform-submission-devportal-contact-us-form input[type="submit"]:active {
  transform: translateY(1px);
}

/* Validation error */
.webform-submission-devportal-contact-us-form .form-item--error input,
.webform-submission-devportal-contact-us-form .form-item--error select,
.webform-submission-devportal-contact-us-form .form-item--error textarea {
  border-color: var(--color-danger, #ef4444);
}

.webform-submission-devportal-contact-us-form .form-item--error-message {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-danger, #ef4444);
  margin-top: var(--space-1, 0.25rem);
}

/* Confirmation message */
.webform-submission-devportal-contact-us-form ~ .webform-confirmation,
.webform-confirmation:has(+ .webform-submission-devportal-contact-us-form) {
  max-width: 680px;
  margin-inline: auto;
  padding: var(--space-6, 1.5rem);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md, 0.5rem);
  color: #166534;
  font-size: var(--text-sm, 0.875rem);
}

/* Dark mode */
[data-theme="dark"] .webform-submission-devportal-contact-us-form input[type="text"],
[data-theme="dark"] .webform-submission-devportal-contact-us-form input[type="email"],
[data-theme="dark"] .webform-submission-devportal-contact-us-form select,
[data-theme="dark"] .webform-submission-devportal-contact-us-form textarea {
  background-color: var(--color-surface-dark, #1e293b);
  border-color: var(--color-border-dark, #334155);
  color: var(--color-text-primary-dark, #f1f5f9);
}

[data-theme="dark"] .webform-submission-devportal-contact-us-form input[type="text"]:focus,
[data-theme="dark"] .webform-submission-devportal-contact-us-form input[type="email"]:focus,
[data-theme="dark"] .webform-submission-devportal-contact-us-form select:focus,
[data-theme="dark"] .webform-submission-devportal-contact-us-form textarea:focus {
  background-color: var(--color-surface-dark, #1e293b);
}

/* =============================================================================
   Contact Us "upgrade" modal — sections, product pills, status chips,
   upgrade-needs checkboxes, and AJAX dialog chrome (Figma fidelity).
   ============================================================================= */

.webform-submission-devportal-contact-us-form .dcp-section {
  border: 0;
  margin: 0;
  padding: 0;
}

.webform-submission-devportal-contact-us-form .dcp-section > .webform-section-title,
.webform-submission-devportal-contact-us-form .dcp-section > legend {
  width: 100%;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary, #64748b);
  margin: 0 0 var(--space-3, 0.75rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--color-border, #e2e8f0);
}

.webform-submission-devportal-contact-us-form .dcp-section > .fieldset-wrapper,
.webform-submission-devportal-contact-us-form .dcp-section > .webform-section-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 0);
}

.webform-submission-devportal-contact-us-form .dcp-section > .webform-section-wrapper .form-item{
  margin-block: 0.5rem;
}

.webform-submission-devportal-contact-us-form .form-item--form-header,
.webform-submission-devportal-contact-us-form .form-item--footer-note {
  margin-block: 0.3rem;
}

.webform-submission-devportal-contact-us-form .dcp-section > .webform-section-wrapper .webform-flexbox {
  margin: 0.2em -0.5em;
}

/* "Related to which product(s)?" radios styled as pill toggles */
.webform-submission-devportal-contact-us-form .dcp-pills .form-radios,
.webform-submission-devportal-contact-us-form .dcp-pills .form-checkboxes,
.webform-submission-devportal-contact-us-form .dcp-pills .form-boolean-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.webform-submission-devportal-contact-us-form .dcp-pills .form-item {
  margin: 0;
  position: relative;
}

.webform-submission-devportal-contact-us-form .dcp-section > .webform-section-wrapper .form-item.form-type--radio{
  margin-block: 0;
}

.webform-submission-devportal-contact-us-form .dcp-pills input[type="radio"],
.webform-submission-devportal-contact-us-form .dcp-pills input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.webform-submission-devportal-contact-us-form .dcp-pills input[type="radio"] + label,
.webform-submission-devportal-contact-us-form .dcp-pills input[type="checkbox"] + label {
  display: inline-block;
  margin: 0;
  padding: 0.5rem 1.125rem;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-primary, #0f172a);
  background: #ffffff;
  border: 1px solid var(--color-border, #d0d7e2);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.webform-submission-devportal-contact-us-form .dcp-pills input[type="radio"]:not(:checked) + label:hover,
.webform-submission-devportal-contact-us-form .dcp-pills input[type="checkbox"]:not(:checked) + label:hover {
  border-color: var(--color-primary, #2f54eb);
  color: var(--color-primary, #2f54eb);
}

.webform-submission-devportal-contact-us-form .dcp-pills input[type="radio"]:checked + label,
.webform-submission-devportal-contact-us-form .dcp-pills input[type="checkbox"]:checked + label {
  background: var(--color-primary, #2f54eb);
  border-color: var(--color-primary, #2f54eb);
  color: #ffffff;
}

.webform-submission-devportal-contact-us-form .dcp-pills input[type="radio"]:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(34, 114, 193, 0.25);
}

/* Live "Your current status:" chips (injected in a form alter) */
.webform-submission-devportal-contact-us-form .dcp-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.webform-submission-devportal-contact-us-form .dcp-status__label {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #64748b);
}

.webform-submission-devportal-contact-us-form .dcp-status__chip {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.625rem);
  border-radius: 999px;
  background: var(--color-neutral-100, #f1f5f9);
  color: var(--color-text-primary, #0f172a);
}

.webform-submission-devportal-contact-us-form .dcp-status__chip--trial {
  background: #fef3c7;
  color: #92400e;
}

.webform-submission-devportal-contact-us-form .dcp-status__chip--active {
  background: #dcfce7;
  color: #166534;
}

/* "Tell us about your upgrade needs" checkboxes — clean native checkbox in a
   flex row (reset Claro's absolute-positioned custom checkbox so the box does
   not overflow left of the content column). */
.webform-submission-devportal-contact-us-form .form-checkboxes .form-item {
  display: flex;
  align-items: center;
  gap: 10px;
  position: static;
  margin: 0;
  padding: 5px 0;
}

.webform-submission-devportal-contact-us-form .form-checkboxes .form-item > label,
.webform-submission-devportal-contact-us-form .form-checkboxes .form-item > label.option {
  position: static;
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}

.webform-submission-devportal-contact-us-form .form-checkboxes input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--color-primary, #2272c1);
  cursor: pointer;
  top: 9px;
}

/* AJAX modal dialog chrome — float the close button, round the corners.
   The visible heading comes from the in-form header (.dcp-form-title). */
.ui-dialog.ft-contact-dialog,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) {
  max-width: 780px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.25);
}

.ui-dialog.ft-contact-dialog .ui-dialog-titlebar,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .ui-dialog-titlebar {
  position: absolute;
  inset: 0 0 auto auto;
  z-index: 2;
  padding: var(--space-4, 1rem);
  background: transparent !important;
  border: 0;
}

.ui-dialog.ft-contact-dialog .ui-dialog-title,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .ui-dialog-title {
  display: none;
}

/* Clean circular × close button (override theme's icon button styling) */
.ui-dialog.ft-contact-dialog .ui-dialog-titlebar-close,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .ui-dialog-titlebar-close {
  position: absolute;
  top: 24px;
  right: 16px;
  width: 10px;
  height: 10px;
  min-width: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: none !important;
  color: var(--color-text-secondary, #64748b);
  cursor: pointer;
  font-size: 0;
  outline: none;
}

/* No harsh focus box on mouse/programmatic focus; subtle ring for keyboard. */
.ui-dialog.ft-contact-dialog .ui-dialog-titlebar-close:focus,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .ui-dialog-titlebar-close:focus {
  outline: none !important;
  box-shadow: none !important;
}

.ui-dialog.ft-contact-dialog .ui-dialog-titlebar-close:focus-visible,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .ui-dialog-titlebar-close:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34, 114, 193, 0.25) !important;
}

/* Robust close-button styling — the .dcp-close class is added by JS directly to
   our dialog's close button, so these win regardless of theme (Gin) or whether
   dialogClass propagated. */
.ui-dialog .ui-dialog-titlebar-close.dcp-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  min-width: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 999px;
  color: var(--color-text-secondary, #64748b);
  cursor: pointer;
  font-size: 0;
  outline: none;
}

.ui-dialog .ui-dialog-titlebar-close.dcp-close::before {
  content: "\00d7";
  font-size: 26px;
  line-height: 1;
  color: var(--color-text-secondary, #64748b);
}

.ui-dialog .ui-dialog-titlebar-close.dcp-close:hover {
  background: rgba(15, 23, 42, 0.06) !important;
}

.ui-dialog .ui-dialog-titlebar-close.dcp-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close.dcp-close .ui-button-icon-space,
.ui-dialog .ui-dialog-titlebar-close.dcp-close svg,
.ui-dialog .ui-dialog-titlebar-close.dcp-close span {
  display: none !important;
}

.ui-dialog .ui-dialog-titlebar-close.dcp-close:focus {
  outline: none !important;
  box-shadow: none !important;
}

.ui-dialog .ui-dialog-titlebar-close.dcp-close:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 114, 193, 0.25) !important;
}

.ui-dialog.ft-contact-dialog .ui-dialog-titlebar-close::before,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .ui-dialog-titlebar-close::before {
  content: "\00d7";
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  color: var(--color-text-secondary, #64748b);
}

.ui-dialog.ft-contact-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .ui-dialog-titlebar-close:hover {
  background: rgba(15, 23, 42, 0.06) !important;
}

/* Hide the theme's own close icon/label so only the CSS ::before × shows.
   Otherwise jQuery UI's .ui-icon-closethick glyph renders alongside the
   ::before glyph, producing two crosses. */
.ui-dialog.ft-contact-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog.ft-contact-dialog .ui-dialog-titlebar-close .ui-button-icon-space,
.ui-dialog.ft-contact-dialog .ui-dialog-titlebar-close svg,
.ui-dialog.ft-contact-dialog .ui-dialog-titlebar-close span,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .ui-dialog-titlebar-close .ui-icon,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .ui-dialog-titlebar-close svg,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .ui-dialog-titlebar-close span {
  display: none !important;
}

/* Hide Drupal contextual-links edit pencil inside the modal */
.ui-dialog.ft-contact-dialog .contextual,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .contextual {
  display: none !important;
}

.ui-dialog.ft-contact-dialog .ui-dialog-content,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .ui-dialog-content {
  padding: var(--space-6, 1.5rem) var(--space-8, 2rem) var(--space-8, 2rem);
  max-height: 80vh;
  overflow-y: auto;
}

.ui-dialog.ft-contact-dialog .webform-submission-devportal-contact-us-form,
.ui-dialog:has(.webform-submission-devportal-contact-us-form) .webform-submission-devportal-contact-us-form {
  padding: 0;
  max-width: none;
}

.ui-dialog.ft-contact-dialog #webform-submission-devportal-contact-us-form-ajax-content:focus {
  outline: 0;
  box-shadow: none;
}

/* Footer: response-time note + Cancel + Send message (Figma footer bar) */
.webform-submission-devportal-contact-us-form .dcp-footer-note {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #64748b);
  margin: var(--space-2, 0.5rem) 0 0;
}

.webform-submission-devportal-contact-us-form .dcp-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  border-top: 1px solid var(--color-border, #e2e8f0);
  padding-top: 0.5rem;
}

.webform-submission-devportal-contact-us-form .dcp-footer-actions .form-actions,
.webform-submission-devportal-contact-us-form .dcp-footer-actions .webform-actions {
  margin: 0;
}

.webform-submission-devportal-contact-us-form .dcp-footer-actions .form-item--cancel,
.webform-submission-devportal-contact-us-form .dcp-footer-actions .form-item-cancel {
  margin-left: auto;
}

/* "From your account" sub-note under a section title */
.webform-submission-devportal-contact-us-form .dcp-section-note {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-tertiary, #94a3b8);
  margin: 0;
}

/* Inline radio group (Preferred response method) — radio + label on one line,
   options in a row. !important to beat Claro's form-boolean-group styles. */
.webform-submission-devportal-contact-us-form .dcp-radio-inline .form-radios,
.webform-submission-devportal-contact-us-form .dcp-radio-inline .form-boolean-group {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.webform-submission-devportal-contact-us-form .dcp-radio-inline .form-radios .form-item,
.webform-submission-devportal-contact-us-form .dcp-radio-inline .form-boolean-group .form-item {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
}

.webform-submission-devportal-contact-us-form .dcp-radio-inline .form-item label,
.webform-submission-devportal-contact-us-form .dcp-radio-inline .form-item label.option {
  display: inline !important;
  position: static !important;
  margin: 0 !important;
  margin-inline-start: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
  inset: auto !important;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

/* Suppress any Claro pseudo-element radio drawn on the label. */
.webform-submission-devportal-contact-us-form .dcp-radio-inline .form-item label::before,
.webform-submission-devportal-contact-us-form .dcp-radio-inline .form-item label::after {
  display: none !important;
}

.webform-submission-devportal-contact-us-form .dcp-radio-inline input[type="radio"] {
  top: 9px;
  box-sizing: border-box;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin: 0 !important;
  margin-inline: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid var(--color-border, #cbd5e1);
  border-radius: 50%;
  background: #ffffff;
  background-image: none;
  box-shadow: none;
  cursor: pointer;
}

.webform-submission-devportal-contact-us-form .dcp-radio-inline input[type="radio"]:checked {
  border-color: var(--color-primary, #2272c1);
}

.webform-submission-devportal-contact-us-form .dcp-radio-inline input[type="radio"]:checked::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 3px;
  border-radius: 50%;
  background: var(--color-primary, #fff);
}

.webform-submission-devportal-contact-us-form .dcp-radio-inline input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 114, 193, 0.25);
}

.webform-submission-devportal-contact-us-form .dcp-radio-inline .form-item > label,
.webform-submission-devportal-contact-us-form .dcp-radio-inline .form-item > label.option {
  position: static;
  padding: 0;
}

/* Attachments — dashed upload area */
.webform-submission-devportal-contact-us-form .form-managed-file,
.webform-submission-devportal-contact-us-form .js-form-managed-file {
  border: 1.5px dashed var(--color-border, #cbd5e1);
  border-radius: var(--radius-md, 0.5rem);
  padding: 1.25rem;
  background: var(--color-neutral-50, #f8fafc);
}

.webform-submission-devportal-contact-us-form .form-managed-file input[type="file"] {
  width: 100%;
}

.webform-submission-devportal-contact-us-form .form-actions,
.webform-submission-devportal-contact-us-form .webform-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-2, 0.5rem);
}

/* Cancel button — secondary/ghost style. Only shown inside the modal. */
.webform-submission-devportal-contact-us-form .dcp-cancel {
  /* Rendered as an <a> (webform's markup filter strips <button>); visible on
     the standalone page too, where the JS falls back to history.back(). */
  display: inline-block;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text-primary, #0f172a);
  background: #ffffff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 0.5rem);
  cursor: pointer;
}

.webform-submission-devportal-contact-us-form .dcp-cancel:hover {
  background: var(--color-neutral-50, #f8fafc);
}

/* Send message no longer full-width inside the footer flex row */
.webform-submission-devportal-contact-us-form .webform-actions input[type="submit"].webform-button--submit,
.webform-submission-devportal-contact-us-form .webform-actions input[type="submit"].button--primary {
  border: none !important;
  background-color: #2f54eb;
  color: #fff;
}

.webform-submission-devportal-contact-us-form .webform-actions input[type="submit"].webform-button--submit:hover,
.webform-submission-devportal-contact-us-form .webform-actions input[type="submit"].button--primary:hover{
  background-color: #1d39c4;
  color: #fff;
  box-shadow: 0 6px 16px rgba(47, 84, 235, 0.4);
}

.webform-submission-devportal-contact-us-form .webform-actions input[type="submit"].webform-button--submit:disabled,
.webform-submission-devportal-contact-us-form .webform-actions input[type="submit"].button--primary:disabled {
  border: none !important;
}
.webform-submission-devportal-contact-us-form .webform-actions input[type="submit"].webform-button--submit:active,
.webform-submission-devportal-contact-us-form .webform-actions input[type="submit"].button--primary:active {
  transform: unset;
}

/* Read-only account fields (first name, last name, work email) */
.webform-submission-devportal-contact-us-form input[readonly],
.webform-submission-devportal-contact-us-form .dcp-readonly {
  background: var(--color-neutral-100, #f3f3f5) !important;
  color: var(--color-text-secondary, #64748b);
  cursor: not-allowed;
  box-shadow: none;
}

/* Classic-theme fieldset chrome (tenant frontend pages): the devportal
   theme renders radio/checkbox groups with the stock fieldset template
   (border + legend on the border), unlike the Claro-based template the
   main site uses. Neutralise it so the standalone page matches the
   main-site look. */
.webform-submission-devportal-contact-us-form fieldset.fieldgroup {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4, 1rem);
  min-width: 0;
}

.webform-submission-devportal-contact-us-form fieldset.fieldgroup > legend {
  float: none;
  width: auto;
  padding: 0;
  margin: 0 0 var(--space-2, 0.5rem);
}

.webform-submission-devportal-contact-us-form fieldset.fieldgroup > legend .fieldset-legend {
  font-weight: 600;
  color: var(--color-text, #0f172a);
}

/* Post-submit status message (AJAX): keep it within the form column, and
   keep the text clear of the absolute-positioned dismiss (x) control. */
.webform-ajax-form-wrapper .alert,
.webform-ajax-form-wrapper .messages {
  box-sizing: border-box;
  position: relative;
  max-width: 680px;
  margin-inline: auto;
  overflow-wrap: anywhere;
}

.webform-ajax-form-wrapper .alert--dismissible,
.webform-ajax-form-wrapper .messages {
  padding-right: var(--space-10, 2.5rem);
}

/* Pill checkbox groups (e.g. "Select the related product(s)"): the generic
   .form-checkboxes rules above (written for the upgrade-needs list) reset
   label padding and show the native box — re-assert the pill look with
   higher specificity for checkbox groups inside .dcp-pills. */
.webform-submission-devportal-contact-us-form .dcp-pills .form-checkboxes .form-item {
  display: inline-flex;
  margin: 0;
  padding: 0;
  position: relative;
}

.webform-submission-devportal-contact-us-form .dcp-pills .form-checkboxes input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.webform-submission-devportal-contact-us-form .dcp-pills .form-checkboxes .form-item > label,
.webform-submission-devportal-contact-us-form .dcp-pills .form-checkboxes .form-item > label.option {
  display: inline-block;
  margin: 0;
  padding: 0.5rem 1.125rem;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-primary, #0f172a);
  background: #ffffff;
  border: 1px solid var(--color-border, #d0d7e2);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.webform-submission-devportal-contact-us-form .dcp-pills .form-checkboxes input[type="checkbox"]:not(:checked) + label:hover {
  border-color: var(--color-primary, #2f54eb);
  color: var(--color-primary, #2f54eb);
}

.webform-submission-devportal-contact-us-form .dcp-pills .form-checkboxes input[type="checkbox"]:checked + label {
  background: var(--color-primary, #2f54eb);
  border-color: var(--color-primary, #2f54eb);
  color: #ffffff;
}

/* Element descriptions (e.g. the attachment file hint): the classic theme
   renders them without Claro's form-item__description class, leaving them at
   the body font size. */
.webform-submission-devportal-contact-us-form .description,
.webform-submission-devportal-contact-us-form .webform-element-description {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #64748b);
  margin-top: var(--space-1, 0.25rem);
}

/* For signed-in admin users the theme applies a button reset through an
   :is(#id, [data-drupal-admin-styles]) specificity hack that outranks the
   class-based submit rules above — match it so the contact form's submit
   keeps the dcp look in every session. */
:is(#dcp-specificity, .webform-submission-devportal-contact-us-form) input[type="submit"].webform-button--submit,
:is(#dcp-specificity, .webform-submission-devportal-contact-us-form) input[type="submit"].button--primary {
  display: block;
  width: 100%;
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  font-family: inherit;
  color: #ffffff;
  background-color: var(--color-primary-dark, #1e3a5f);
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  text-align: center;
  -webkit-appearance: none;
}

:is(#dcp-specificity, .webform-submission-devportal-contact-us-form) input[type="submit"].webform-button--submit:hover,
:is(#dcp-specificity, .webform-submission-devportal-contact-us-form) input[type="submit"].button--primary:hover {
  background-color: var(--color-primary, #2272c1);
}