.customerModal {
  .ant-modal-content {
    border-radius: 16px;
    box-shadow: 0px 0px 0px 1px rgba(11, 18, 52, 0.15), 0px 5px 11px rgba(5, 9, 31, 0.10), 0px 21px 21px rgba(5, 9, 31, 0.09), 0px 47px 28px rgba(5, 9, 31, 0.05), 0px 83px 33px rgba(5, 9, 31, 0.01), 0px 130px 36px rgba(5, 9, 31, 0.00);
  }
}

.modalHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.sectionTag {
  width: 12px;
  height: 24px;
  border-radius: 4px;
  
  &.overview {
    background-color: #cabdff;
  }
  
  &.address {
    background-color: #a9e195;
  }
  
  &.notes {
    background-color: #ff9d8f;
  }
}

.sectionTitle {
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.24px;
  line-height: 28px;
  color: #3f434a;
  margin: 0;
}

.formSection {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.formRow {
  display: flex;
  gap: 24px;
}

.formField {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.fieldLabel {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  color: #364050;
}

.requiredAsterisk {
  color: #17a584;
  font-size: 7px;
}

.avatarSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.avatarUpload {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatarButton {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatarInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: opacity 0.2s ease;
  
  &:hover {
    opacity: 0.8;
  }
}

.avatarChooseText {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.16px;
  color: #0b1234;
}

.avatarHelpText {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.24px;
  color: #696f8c;
}

.phoneInput {
  display: flex;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px rgba(11, 18, 52, 0.10), 0px 1px 2px rgba(11, 18, 52, 0.15);
  overflow: hidden;
}

.countryCodeSelect {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-right: 1px solid rgba(11, 18, 52, 0.10);
  min-width: 85px;
}

.flagIcon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.countryCodeText {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #0b1234;
}

.phoneNumberInput {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 12px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #696f8c;
}

.marketingPreferences {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preferenceItem {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preferenceText {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.24px;
  color: #696f8c;
}

.notesTextarea {
  min-height: 202px;
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px rgba(11, 18, 52, 0.10), 0px 1px 2px rgba(11, 18, 52, 0.15);
  resize: none;
}

.notesHelpText {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #364050;
  margin-top: 8px;
}

.modalActions {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
}

.draftButton {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.16px;
  color: #0b1234;
  background: #ffffff;
  border: 1px solid rgba(11, 18, 52, 0.15);
  border-radius: 8px;
  padding: 8px 24px;
  height: auto;
}

.primaryButton {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.16px;
  color: #ffffff;
  background: #0f62fe;
  border: none;
  border-radius: 8px;
  padding: 8px 24px;
  height: auto;
}

.customTabs {
  .ant-tabs-tab {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    color: #696f8c;
    
    &.ant-tabs-tab-active {
      font-weight: 500;
      color: #0f62fe;
    }
  }
  
  .ant-tabs-ink-bar {
    background: #0f62fe;
    height: 3px;
  }
  
  .ant-tabs-content-holder {
    padding-top: 24px;
  }
}