/* QA31: final estimator readability and proposal-rail editing polish. */

/* Keep the deposit percentage visibly editable without a detached white box. */
.customer-builder-painting-rail .hgc-shared-deposit .edit,
.customer-builder-painting-rail .hgc-shared-deposit > button.edit {
  color: #ff8a1f !important;
  background: transparent !important;
}

.customer-builder-painting-rail .hgc-shared-deposit .edit svg,
.customer-builder-painting-rail .hgc-shared-deposit > button.edit svg {
  color: #ff8a1f !important;
  stroke: currentColor !important;
}

.customer-builder-painting-rail .hgc-shared-deposit .edit input,
.customer-builder-painting-rail .hgc-shared-deposit > button.edit em {
  min-width: 42px !important;
  min-height: 30px !important;
  padding: 4px 5px !important;
  border: 1px solid #ff8a1f !important;
  border-radius: 5px !important;
  background: rgba(255, 138, 31, 0.08) !important;
  color: #ff8a1f !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.customer-builder-painting-rail .hgc-shared-deposit .edit input:is(:hover, :focus, :focus-visible),
.customer-builder-painting-rail .hgc-shared-deposit > button.edit:is(:hover, :focus-visible) em {
  background: rgba(255, 138, 31, 0.16) !important;
  outline: 2px solid rgba(255, 138, 31, 0.25) !important;
  outline-offset: 1px !important;
}

.customer-builder-painting-rail .hgc-shared-deposit .edit em {
  color: #ff8a1f !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* The embedded estimator mounts the same rail without the customer-builder
   wrapper. Apply the identical editor treatment to its actual shared rail. */
.painting-reference-summary .hgc-shared-deposit > button.edit {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #ff8a1f !important;
  box-shadow: none !important;
}

.painting-reference-summary .hgc-shared-deposit > button.edit svg {
  width: 14px !important;
  height: 14px !important;
  color: #ff8a1f !important;
  stroke: currentColor !important;
}

.painting-reference-summary .hgc-shared-deposit > button.edit em {
  min-width: 42px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 5px !important;
  border: 1px solid #ff8a1f !important;
  border-radius: 5px !important;
  background: rgba(255, 138, 31, 0.08) !important;
  color: #ff8a1f !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 1 !important;
}

.painting-reference-summary .hgc-shared-deposit > button.edit:is(:hover, :focus-visible) em {
  background: rgba(255, 138, 31, 0.16) !important;
  outline: 2px solid rgba(255, 138, 31, 0.25) !important;
  outline-offset: 1px !important;
}

/* The in-room custom item form was using compact helper-size type. Bring it
   up to the same readable scale as the surrounding estimator controls. */
.painting-custom-items .painting-other-item-form > div strong {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.painting-custom-items .painting-other-item-form > div span {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.painting-custom-items .painting-other-item-form > label,
.painting-custom-items .painting-other-item-total {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.painting-custom-items .painting-other-item-form input {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.painting-custom-items .painting-other-item-total strong,
.painting-custom-items .painting-other-item-form > button {
  font-size: 13px !important;
}

/* This cyan rail control may use the established WBE orange while engaged,
   but must not inherit the older muddy orange used by the global select rule. */
.customer-builder-painting-rail .hgc-shared-customer-display select,
.customer-builder-painting-rail .painting-customer-display select {
  accent-color: #ff8a1f !important;
  border-color: #49677d !important;
  background: #071521 !important;
  color: #ffffff !important;
}

.customer-builder-painting-rail .hgc-shared-customer-display select:hover,
.customer-builder-painting-rail .painting-customer-display select:hover,
.customer-builder-painting-rail .hgc-shared-customer-display select:is(:focus, :focus-visible, :active),
.customer-builder-painting-rail .painting-customer-display select:is(:focus, :focus-visible, :active) {
  border-color: #ff8a1f !important;
  outline-color: #ff8a1f !important;
  box-shadow: 0 0 0 2px rgba(255, 138, 31, 0.2) !important;
}

.customer-builder-painting-rail .hgc-shared-customer-display select option:checked,
.customer-builder-painting-rail .painting-customer-display select option:checked {
  background: #3a1c08 !important;
  color: #ffffff !important;
}

.painting-reference-summary .painting-customer-display select {
  accent-color: #ff8a1f !important;
  border-color: #49677d !important;
  background: #071521 !important;
  color: #ffffff !important;
}

.painting-reference-summary .painting-customer-display select:hover,
.painting-reference-summary .painting-customer-display select:is(:focus, :focus-visible, :active) {
  border-color: #ff8a1f !important;
  outline: 2px solid #ff8a1f !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 2px rgba(255, 138, 31, 0.2) !important;
}

.painting-reference-summary .painting-customer-display select option:checked {
  background: #3a1c08 !important;
  color: #ffffff !important;
}