/* Container for the input and label */
.input-container {
  position: relative;
  margin-top: 20px;
  width: 300px;
}
  
/* Input field styling */
.input-field,
.slds-input,
.global-header_search input {
  color: var(--mk-heading-color, #101820);
  width: 100%;
  padding: 12px 10px;
  font-size: 1rem;
  border: 1px solid var(--steel-black)!important;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
  background: transparent;
}
/* Search Input */
.global-header_search .input-wrapper {
  border: 0!important;
  background: transparent !important;
}
.global-header_search .input-wrapper.active {
  box-shadow: none!important;
}
input.number-input__input {
  border-color: #D9D9D6 !important; /* qty box border */
}
/* Initial label inside the input */
.input-label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: var(--font-weight-normal)!important;
  color: var(--steel-black, #545859)!important;
  transition: 0.2s ease all;
  pointer-events: none; /* Label won't interfere with clicks */
  background-color: white;
  padding: 0 5px;
}
label.slds-form-element__label {
  cursor: text;
  transition: ease all 0.2s;
  z-index: 5;
}
label.slds-form-element__label .slds-required {
  display: none;
}
/* When the input is focused or has content, move the label to the top */
.input-field:focus + .input-label,
.input-field:not(:placeholder-shown) + .input-label {
  top: 0;
  left: 10px;
  font-size: 0.75rem;
  color: var(--steel-black)!important;
  background-color: white;
}

/* Add some focus effects for the input field */
.input-field:focus,
.slds-input:focus {
  border-color: var(--steel-black); 
} 
.slds-textarea:focus,
.mk-address-container lightning-textarea.slds-form-element .slds-textarea:focus {
  box-shadow: none!important;
  border: 2px solid var(--steel-black) !important;
}
.slds-textarea:focus-visible {
  outline: 0 !important;
}
.comm-login-form__container .slds-form-element .slds-form-element__label,
.comm-login-form__container .slds-form-element .slds-form-element div[part="input-text"]:not(:focus)+.slds-form-element__label,
.comm-self-register__container .slds-form-element .slds-form-element__label,
.comm-self-register__container .slds-form-element .slds-form-element div[part="input-text"]:not(:focus)+.slds-form-element__label {
  position: relative !important;
  top: 50px !important;
  left: 12px;
  transform: translateY(-50%);
  font-size: 1rem !important;
  transition: 0.2s ease all;
  pointer-events: none;
  background-color: var(--white);
  width: fit-content !important;
  display: inline-block;
  z-index: 9;
  padding: 0 5px !important;
  color: var(--steel-black)!important;
}

.comm-login-form__container .slds-form-element .slds-input,
.comm-self-register__container .slds-form-element .slds-input {
  width: 100%;
  padding: 12px 10px;
  font-size: 1rem;
  border: 1px solid var(--steel-black)!important;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
  background: transparent;
  font-family: var(--font-family-noto-sans);
}

.comm-login-form__container .slds-form-element lightning-input.slds-form-element .slds-input:focus,
.comm-self-register__container .slds-form-element lightning-input.slds-form-element .slds-input:focus {
  border: 2px solid var(--steel-black) !important;
  box-shadow: none !important;
}
.comm-login-form__container .slds-form-element.slds-has-error .slds-input, 
.comm-self-register__container .slds-form-element.slds-has-error .slds-input {
  border: 1px solid var(--mk-error)!important;
  box-shadow: none!important;
}
.comm-login-form__container .slds-form-element lightning-input div,
.comm-self-register__container .slds-form-element lightning-input div {
  border: none !important;
}

.comm-login-form__container .slds-form-element p.ui-danger,
.comm-self-register__container .slds-form-element p.ui-danger {
  color: var(--mk-error);
  font-family: var(--font-family-noto-sans);
}

.comm-login-form__container .slds-form-element lightning-input.slds-form-element:not(.slds-has-error),
.comm-self-register__container .slds-form-element lightning-input.slds-form-element:not(.slds-has-error) {
  padding-bottom: 0.15rem !important;
  margin-bottom: 0!important;
}

.comm-login-form__container .slds-form-element .errorToInput input.slds-input,
.comm-self-register__container .slds-form-element .errorToInput input.slds-input,
.comm-login-form__container  lightning-input.slds-form-element.slds-has-error .slds-input:focus, 
.comm-self-register__container  lightning-input.slds-form-element.slds-has-error .slds-input:focus {
  border: 2px solid var(--mk-error)!important;
  box-shadow: none!important;
}

.comm-login-form__container .slds-form-element label.slds-form-element__label,
.comm-self-register__container .slds-form-element label.slds-form-element__label {
  top: -24px;
  display: inline-block;
  padding: 0 5px;
  background: var(--white);
  font-family: var(--font-family-noto-sans);
}

.comm-login-form__container .slds-form-element [part="input-text"]:focus-within .slds-form-element__label,
.comm-login-form__container .slds-form-element [part="input-text"][populated] .slds-form-element__label,
.comm-login-form__container .slds-form-element [part="input-text"][populated] .slds-form-element__label,
.comm-login-form__container .slds-form-element .slds-form-element div[part="input-text"]:focus-within label.slds-form-element__label,
.comm-self-register__container .slds-form-element [part="input-text"]:focus-within .slds-form-element__label,
.comm-self-register__container .slds-form-element [part="input-text"][populated] .slds-form-element__label,
.comm-self-register__container .slds-form-element [part="input-text"][populated] .slds-form-element__label,
.comm-self-register__container .slds-form-element .slds-form-element div[part="input-text"]:focus-within label.slds-form-element__label {
  top: 15px !important;
  transform: translateY(0);
  font-size: 0.75rem !important;
}

/*override styles related ligtning form elements of Address form starts here */

.mk-address-container .filled .slds-assistive-text {
  top: 30px !important;
  font-family: var(--font-family-noto-sans);
  font-size: 0.75rem !important;
}
.mk-address-container  .slds-assistive-text ,
.mk-address-container .slds-form-element div[part="input-text"]:not(:focus) + .slds-form-element__label {
  position: relative !important;
  top: 50px !important;
  left: 12px;
  transform: translateY(-50%);
  font-size: 16px !important;
  color: var(--steel-black, #545859) !important;
  transition: 0.2s ease all;
  pointer-events: none;
  background-color: white;
  padding: 0 5px;
  height: 22px !important;
  width: fit-content !important;
  display: inline-block;
  z-index: 9;
  padding: 0 5px !important;
  font-family: var(--font-family-noto-sans);
}


.mk-address-container  div.slds-form-element__control  input:focus ~ label,
.mk-address-container  div.slds-form-element__control  input:not(:placeholder-shown) ~ label,
.mk-address-container .slds-form-element div[part="input-text"]:focus-within label.slds-form-element__label,
.mk-address-container .slds-form-element div[part="input-text"] input:not(:placeholder-shown) ~ label.slds-form-element__label,
.mk-address-container .slds-form-element div[part="input-text"]:focus + .slds-form-element__label,
.mk-address-container .slds-form-element lightning-textarea:focus-within label.slds-form-element__label,
.coupon-code-container  div.slds-form-element__control  input:focus ~ label,
.coupon-code-container  div.slds-form-element__control  input:not(:placeholder-shown) ~ label,
.coupon-code-container .slds-form-element div[part="input-text"]:focus-within label.slds-form-element__label,
.coupon-code-container .slds-form-element div[part="input-text"] input:not(:placeholder-shown) ~ label.slds-form-element__label,
.coupon-code-container .slds-form-element div[part="input-text"]:focus + .slds-form-element__label,
.coupon-code-container .slds-form-element lightning-textarea:focus-within label.slds-form-element__label,
.coupon-code-container div[populated] .slds-form-element__label    {
  top: 30px !important;
  left: 10px;
  font-size: 0.75rem !important;
  color: var(--mk-heading-color);
  background-color: white;
  font-family: var(--font-family-noto-sans);
}

.coupon-code-container  div.slds-form-element__control  input:focus ~ label,
.coupon-code-container  div.slds-form-element__control  input:not(:placeholder-shown) ~ label,
.coupon-code-container .slds-form-element div[part="input-text"]:focus-within label.slds-form-element__label,
.coupon-code-container .slds-form-element div[part="input-text"] input:not(:placeholder-shown) ~ label.slds-form-element__label,
.coupon-code-container .slds-form-element div[part="input-text"]:focus + .slds-form-element__label,
.coupon-code-container .slds-form-element lightning-textarea:focus-within label.slds-form-element__label,
.coupon-code-container div[populated] .slds-form-element__label {
  top: -6px !important;
  padding: 0 5px;

}
.coupon-code-container .coupon-input-form .coupon-input-container .coupon-code-input .slds-form-element__label {
  top: 10px;
  left: 10px;
}
.mk-address-container  lightning-input.slds-form-element .slds-input:focus,
.coupon-code-container  lightning-input.slds-form-element .slds-input:focus  {
  border-color: var(--steel-black);
}
.mk-address-container lightning-input div,
.coupon-code-container lightning-input div {
  border: none !important;
}

.mk-address-container p.ui-danger {
  color: var(--mk-error);
  font-family: var(--font-family-noto-sans);
}

.mk-address-container lightning-input.slds-form-element:not(.slds-has-error) {
  padding-bottom: 0.15rem !important;
  margin-bottom: 3px;
}

.mk-address-container .errorToInput input.slds-input {
  border-color: var(--mk-error) !important;
}

.mk-address-container .lightning-combobox [part="combobox"] label.slds-form-element__label {
  top: 10px;
}

.mk-address-container label.slds-form-element__label.mk-address-combobox-label {
  top: 12px;
  display: inline;
  padding: 0 5px;
  background: var(--white);
  font-family: var(--font-family-noto-sans);
  position: relative;
  font-size: 0.75rem !important;
}

.mk-checkout-contact div[populated] .slds-input[readonly] {
  padding: 12px 10px !important;
  border: 1px solid  var(--steel-black);
}

.country-select-container {
  position: relative;
}
.caret-icon-container {
  position: absolute;
  right: 10px;
  top: 40px;
  pointer-events: none;
}

.mk-address-container lightning-combobox {  
  padding-bottom: 0.15rem !important;
  margin-bottom: 3px!important;
}

.mk-address-container lightning-textarea.slds-form-element .slds-textarea {
  height: 50px;
  padding: 12px 10px;
}

.mk-address-container lightning-combobox [part="combobox"] lightning-base-combobox .slds-combobox__form-element,
.mk-address-container lightning-textarea.slds-form-element .slds-textarea{
  border: 1px solid var(--steel-black)!important;
}

.mk-address-container lightning-combobox + c-ccc-icon {
  position: absolute;
  right: 10px;
  top: 15px;
  pointer-events: none;
}

.mk-address-container lightning-combobox lightning-icon {
  visibility: hidden;
}

.mk-address-container .autocomplete-container{
  top: 75px;
  border: 1px solid var(--steel-black)!important;
}

.mk-address-container .autocomplete-container .autocomplete-option a{
  color: var(--mk-primary);
  font-family: var(--font-family-noto-sans);
}

.mk-address-container .slds-spinner {
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
}

.mk-address-container .slds-spinner  .slds-assistive-text {
  left: -24px;
}

.mk-address-container .slds-checkbox label span {
  color: var(--mk-heading-color) !important;
  font-size: 0.75rem !important;
  font-family: var(--font-family-noto-sans);
}

.mk-address-container .slds-checkbox {
  margin-top: 2rem;
}

.mk-address-container label.slds-form-element__label {
  cursor: text;
  position: absolute;
  font-size: 1rem;
  transition: ease all 0.2s;
  z-index: 1;
  padding: 0;
  left: 12px;
}

.mk-address-container .autocomplete-container {
  position: relative !important;
  top: -7px !important;
  max-height:250px;
  overflow: auto;
}

/* for dropdown */
.mk-address-container lightning-combobox:not(.slds-has-error) button.slds-combobox__input {
  box-shadow: none;
}

.mk-address-container lightning-combobox:not(.slds-has-error) button.slds-combobox__input:focus,
.mk-address-container lightning-combobox:not(.slds-has-error) button.slds-combobox__input:active {
  box-shadow: none;
}

.mk-address-container lightning-combobox [part="combobox"] {
  position: relative;
}

.mk-address-container lightning-combobox [part="combobox"] label.slds-form-element__label {
  top: 4px;
  font-size: 1rem;
  z-index: 1;
}

.mk-address-container lightning-combobox [part="combobox"] lightning-base-combobox [part="input-text"] [part="input-container"] input,
.mk-address-container lightning-combobox [part="combobox"] lightning-base-combobox button.slds-combobox__input {
  min-height: 50px;
  border: none;
  box-shadow: none;
  border-radius: 4px;
  padding: 3px 12px;
}

.mk-address-container lightning-combobox [part="combobox"] lightning-base-combobox .slds-combobox__form-element {
  border-radius: 4px;
}

.mk-address-container lightning-combobox [part="combobox"] lightning-base-combobox .slds-combobox__form-element:has(.slds-input:focus),
.mk-address-container lightning-combobox [part="combobox"] lightning-base-combobox .slds-combobox__form-element:has(button.slds-combobox__input:focus),
.mk-address-container lightning-combobox.slds-has-error [part="combobox"] lightning-base-combobox .slds-combobox__form-element:has(.slds-input:focus){
  border: 2px solid var(--steel-black);
  border-radius: 4px;
}
.mk-address-container lightning-combobox [part="combobox"] lightning-base-combobox button.slds-combobox__input > span {
  margin-top: 8px;
}
.mk-address-container lightning-textarea {
  margin-bottom: 8px;
}
.mk-address-container .slds-input:disabled {
  background: var(--white) !important;
  opacity: 0.6;
}
.mk-address-container .slds-form-element:has(input:disabled) label.slds-form-element__label {
  color: rgb(84, 88, 89, 0.6) !important;
  background: var(--white);
}
.slds-combobox.slds-is-open div.slds-input__icon-group .slds-icon_container svg,
.slds-dropdown-trigger.slds-is-open div.slds-input__icon-group .slds-icon_container svg,
.birthday-input-combobox-container .slds-dropdown-trigger.slds-is-open .slds-icon_container svg,
.country-select-container:has(.slds-dropdown-trigger.slds-is-open) .caret-icon-container svg,
.slds-combobox.slds-is-open .caret-down-icon svg{
    transform: rotate(180deg);
}
.mk-address-container lightning-input p#char-limit-warning {
  display:none;
}
lightning-input.slds-form-element.slds-has-error svg[part="icon"] {
  display: none;
}