/*
 * Your global styles here
 */
html,
body {
  height: 100%;
}

html {
  background: white;
}

body {
  margin: 0;
}

/* ==========================================================================
   Registration flow fields
   --------------------------------------------------------------------------
   The register modal renders <lightning-flow>, so its inputs are drawn by
   Salesforce's SLDS components rather than by publicNavbar's own markup, and
   arrive looking nothing like the login modal beside them. These rules bring
   them to the same values publicNavbar.css uses for .form-input.

   Everything is scoped to .flow-container, which was verified to survive the
   crossing into the flow's shadow tree - so the rest of the site keeps stock
   SLDS. !important throughout because SLDS sets these with high specificity.

   Wording is not styling: the English labels and the --None-- placeholder
   live in the flow itself and can only be changed in Flow Builder.
   ========================================================================== */

.flow-container .slds-form-element__label {
  display: block !important;
  font-family: "Lato", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #344054 !important;
  margin-bottom: 6px !important;
}

.flow-container .slds-form-element {
  margin-bottom: 18px !important;
}

.flow-container .slds-input,
.flow-container .slds-textarea,
.flow-container .slds-combobox__input {
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 14px !important;
  color: #101828 !important;
  background: #ffffff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.flow-container .slds-input::placeholder,
.flow-container .slds-textarea::placeholder,
.flow-container .slds-combobox__input::placeholder {
  color: #98a2b3 !important;
}

.flow-container .slds-input:focus,
.flow-container .slds-textarea:focus,
.flow-container .slds-combobox__input:focus {
  border-color: #00a69c !important;
  box-shadow: 0 0 0 3px rgba(0, 166, 156, 0.12) !important;
}

/* The grey fill on a picklist is the browser's own select chrome, so
   appearance has to be reset before the border and background read
   correctly. The chevron is inlined so it needs no hosted asset. */
.flow-container .slds-select {
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 36px 10px 14px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 14px !important;
  color: #101828 !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
}

.flow-container .slds-select:focus {
  border-color: #00a69c !important;
  box-shadow: 0 0 0 3px rgba(0, 166, 156, 0.12) !important;
  outline: none !important;
}

.flow-container
  .slds-checkbox
  [type="checkbox"]:checked
  + .slds-checkbox__label
  .slds-checkbox_faux,
.flow-container
  .slds-radio
  [type="radio"]:checked
  + .slds-radio__label
  .slds-radio_faux {
  background-color: #00a69c !important;
  border-color: #00a69c !important;
}

.flow-container .slds-form-element__help {
  font-family: "Lato", sans-serif !important;
  font-size: 12px !important;
  color: #d92d20 !important;
}

.flow-container .slds-button_brand,
.flow-container .slds-button_neutral {
  min-height: 44px !important;
  padding: 12px 20px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.flow-container .slds-button_brand {
  background: linear-gradient(180deg, #00a69c 0%, #00938b 100%) !important;
  border: none !important;
  color: #ffffff !important;
}

.flow-container .slds-button_brand:hover {
  background: linear-gradient(180deg, #01b6ac 0%, #00a39d 100%) !important;
}

.flow-container .slds-button_neutral {
  background: #ffffff !important;
  border: 1px solid #d0d5dd !important;
  color: #344054 !important;
}

/* ==========================================================================
   Buat Tiket dialog
   --------------------------------------------------------------------------
   The dialog's form is BSI_Case_Submission_Flow, so its fields are drawn by
   SLDS rather than by b2cPicTicketModal. The flow has no input variables, so
   embedding it was the only way to reach the backend - these rules bring what
   it draws back to the values the portal uses elsewhere.

   Scoped to .ticket-flow, verified to survive the crossing into the flow's
   shadow tree the same way .flow-container does. !important throughout
   because SLDS sets the same properties with high specificity.
   ========================================================================== */

.ticket-flow .slds-form-element__label {
  display: block !important;
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475467 !important;
  margin-bottom: 8px !important;
}

.ticket-flow .slds-form-element {
  margin-bottom: 18px !important;
}

.ticket-flow .slds-input,
.ticket-flow .slds-textarea,
.ticket-flow .slds-combobox__input {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  color: #101828 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: rgb(230, 234, 240) 0 0 0 1px inset !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.ticket-flow .slds-textarea {
  line-height: 1.5 !important;
  resize: vertical !important;
}

.ticket-flow .slds-input::placeholder,
.ticket-flow .slds-textarea::placeholder {
  color: #98a2b3 !important;
}

.ticket-flow .slds-input:focus,
.ticket-flow .slds-textarea:focus,
.ticket-flow .slds-combobox__input:focus {
  box-shadow: #5ec9c4 0 0 0 1px inset !important;
}

/* The grey fill on a picklist is the browser's own select chrome, so
   appearance has to be reset before the border reads correctly. */
.ticket-flow .slds-select {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 40px 10px 14px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  color: #101828 !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: rgb(230, 234, 240) 0 0 0 1px inset !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
}

.ticket-flow .slds-select:focus {
  box-shadow: #5ec9c4 0 0 0 1px inset !important;
  outline: none !important;
}

.ticket-flow .slds-form-element__help {
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  color: #d92d20 !important;
}

/* The flow's own footer sits at the bottom of the dialog; the buttons are
   restated to match Batal and Buat Tiket from the mockup. */
.ticket-flow .slds-button_brand,
.ticket-flow .slds-button_neutral {
  min-height: 44px !important;
  padding: 12px 24px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
}

.ticket-flow .slds-button_brand {
  background: #00a39d !important;
  border: none !important;
  color: #ffffff !important;
}

.ticket-flow .slds-button_brand:hover {
  background: #00827d !important;
}

.ticket-flow .slds-button_neutral {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: rgb(230, 234, 240) 0 0 0 1px inset !important;
  color: #475467 !important;
}

/* ==========================================================================
   Formulir Kendala publik
   --------------------------------------------------------------------------
   publicCaseForm carries both flow-container and case-flow, so its fields
   inherit everything above and only the differences are restated here.

   The footer buttons sit tighter than the registration modal's, at the
   client's request: 6px top and bottom instead of 12px, and the height left
   to the content. The 44px floor from .flow-container has to go with it -
   at 6px padding the button lands near 36px, so the floor alone would hold
   it at 44px and the change would not show. The horizontal 20px is left
   alone.
   ========================================================================== */

.case-flow .slds-button_brand,
.case-flow .slds-button_neutral {
  min-height: auto !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}