/* This is terrible but I don't see a better and faster approach */
span[data-testid='country-hint'] {
  color: #787573 !important;
}

/* <INCIDENT-16088> */
div[class^='organization-'] {
  & > div > div {
    z-index: auto !important;
  }
}

div[data-cid='customer_type_picker'],
div[data-cid='am.customer_type'] {
  width: 100%;
}
/* </INCIDENT-16088> */

div[id^='billing-'],
div[id^='addressCollector-'] {
  &[id$='-fieldset'] > div {
    width: 100%;
    /* <INCIDENT-16088> */
    z-index: auto !important;
    /* </INCIDENT-16088> */
  }

  &[id$='-city__root'],
  &[id$='-region__root'] {
    width: 100% !important;
  }

  &[id$='-region__root'] {
    margin-left: 1px;
  }
}
/*
 * I don't like this at all but this is the only way
 * of matching the figma designs without bumping id-module.
 * The alternative is to branch out of id-module before their
 * update to bubble-ui 5
 */

[class='kec'] span[data-testid='country-hint'] {
  margin-top: -16px !important;
  margin-bottom: 16px !important;
  display: block;
}

[data-cid='am.fieldset'] > * > div {
  /* Styles for the child of the child of data-cid="am.fieldset"
  This is to fix <INCIDENT-16232> and it will be fixed by id-module v4.6.1 but
  we have to upgrade to bubbleui v5 for it */
  width: 100%;
}

[id='billing-baseWrapper'] div[style*='border-radius: 5px;'] {
  border-radius: 16px !important;
}

/*
Due to bubble ui v4 not properly calculating the height of the payment option
in the RadioOption component, we disable animation in sections/PaymentSelectorKP/index.js
and use a custom CSS animation for the time being - not as cute but it works
*/
.vqF6c__src-sections-PaymentSelectorKP-components-customanimation {
  animation: 1.2s cubic-bezier(0.17, 0.27, 0, 1.19) 0s 1 qesZ8__src-sections-PaymentSelectorKP-components-fadeIn;
}

@keyframes qesZ8__src-sections-PaymentSelectorKP-components-fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}